zoukankan      html  css  js  c++  java
  • 一个input输入内容监听联动的demo

    两个input,一个在其中一个输入,内容在另一个input中实时回显

    代码如下

    <!DOCTYPE html>
    <html>
    <head>
    <title>demo.html</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div style='padding:100px;60%'>
            <div>
                <h3>一个input联动的demo</h3>
            </div>
            <hr>
            <div>
                <div>id为master的input</div>
                <input id='master' type='text' class='form-control'>
            </div>
            <div>
                <div>id为slave的input</div>
                <input id='slave' type='text' class='form-control'>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $(function() {
            $('#master').keyup(function() { //master键入过程中的监听函数
                var me = $(this); //获取master的input
                var val = me.val(); //获取master的input的val
                $('#slave').val(val); //将master中键入的内容实时的拿到slave中;
            })
        })
    </script>
    </html>

    效果如下

  • 相关阅读:
    python 遍历目录 正则
    (含PPT)MySQL托管服务架构及读写分离的优化
    jquery 将一维数组分配给下拉菜单
    kafka安装和使用
    How to search Installed Updates
    How to search Installed Updates
    How to search Installed Updates
    How to search Installed Updates
    复旦软件工程专业课
    复旦软件工程专业课
  • 原文地址:https://www.cnblogs.com/liuyuhangCastle/p/10457515.html
Copyright © 2011-2022 走看看