jQuery - 实现多个输入框同步操作

有些时候为了提高效率，需要实现多个输入框同步操作。提高人机交互的友好性。

下面就来实现一个多个输入框同步操作的小例子。

 

   效果如图。

 

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery实现多个输入框同步操作</title>
        <style type="text/css">
        </style>
        </style>
    </head>
    <body>
        <h2 id="h2-caption">jQuery实现多个输入框同步操作</h2>
        <hr><br>
        <form id="id-form-syninput">
            <b>输入框1:&nbsp;&nbsp;</b><input type="text" name="input-syninput-1"/><br/>
            <b>输入框2:&nbsp;&nbsp;</b><input type="text" name="input-syninput-2"/><br/>
            <b>输入框3:&nbsp;&nbsp;</b><input type="text" name="input-syninput-3"/><br/>
            <b>输入框4:&nbsp;&nbsp;</b><input type="text" name="input-syninput-4"/><br/>
            <b>输入框5:&nbsp;&nbsp;</b><input type="text" name="input-syninput-5"/><br/>
            <b>输入框6:&nbsp;&nbsp;</b><input type="text" name="input-syninput-6"/><br/>
        </form>
        <br><hr>
        <div id="div-log">
            <p>日志记录：</p>
        </div>
        <script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $(':input').on('keyup',function(){
                    $(':text').val($(this).val());
                    $("#div-log").html($("#div-log").html()+"<p>"+"用户输入数据:"+$(this).val()+"."+"系统同步数据:"+$(this).val()+"</p>");
                });
            });
        </script>
    </body>
</html>

 

posted @ 2016-06-21 08:04  温柔的敲敲敲  阅读(1970)  评论(0)    收藏  举报