Question

我试图创建一个文本框，用于逐个在其他4个文本框中输入值

我尝试了下面的代码，但它只复制到一个文本框...

  <html>
    <head>
    <script>
    function copy_data(val){
    var a = document.getElementById(val.id).value
    document.getElementById("copy_to").value=a
    }


    </script>

    </head>
    <body>
    <input type="text" name ="a" id="copy_from" onKeyUp="copy_data(this)"/>


    <input type="text" name ="a" id="copy_to" disabled/>


    <input type="text" name ="a" id="copy_to" disabled/>


    <input type="text" name ="a" id="copy_to" disabled/>


    <input type="text" name ="a" id="copy_to" disabled/>

        enter code here

    <input type="text" name ="a" id="copy_to" disabled/>
    </body>
    </html>

Answer 1

演示 http://jsfiddle.net/Cn6Rb/

Id是独一无二的。即使用class属性

* API：http://api.jquery.com/keyup/

希望这符合您的需求:)

<强>代码

$(document).ready(function () {
    $('#copy_from').keyup(function(){

        $('.copy_to').val($(this).val());

    });

});

<强> HTML

<input type="text" name="a" id="copy_from" />
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>enter code here
<input type="text" name="a" class="copy_to" disabled/>

Answer 2

注意Id应该是唯一的，使用不同的策略

使用Jquery

javascript代码

            function copy_data(val){
                  $('.myKlass').val(val.value);  
            }

html代码

    <input type="text" class="myKlass" name ="a" id="copy_to1" disabled/>
    <input type="text" class="myKlass" name ="a" id="copy_to2" disabled/>
    <input type="text" class="myKlass" name ="a" id="copy_to3" disabled/>

使用javascript

    function copy_data(val){
         var elem_list = document.getElementsByName('a');
         for(var i = 1; i < elem_list.length;i++){
             elem_list.item(i).value = val.value;
         }
    }

Answer 3

尝试此操作（按Enter键复制值）：
Fiddle

<input type="text" name="a" id="copy_from" onKeyUp="copy_data(this,event)"/>


<input type="text" name="a" class="copy_to" disabled/>


<input type="text" name="a" class="copy_to" disabled/>


<input type="text" name="a" class="copy_to" disabled/>


<input type="text" name="a" class="copy_to" disabled/>

enter code here

<input type="text" name="a" class="copy_to" disabled/>

<script>
    var count = 0;
    function copy_data(val, event) {
        if (event.keyCode == 13) {
            if (count <= 4) {
                var a = document.getElementsByClassName('copy_to')[count];
                a.value = val.value;
                val.value = '';
                count++;
            }
        }
    }


</script>

Answer 4

实际上，类不是最好的属性，因为它应该用作应用样式而不是识别dom元素的方法。您可以使用html5“data- *”属性来获得更清晰的HTML代码，如下所示：

<input type="text" name ="a" data-role="source"/>
<div data-role="destination">
    <input type="text" disabled/>
    <input type="text" disabled/>
    <input type="text" disabled/>
    <input type="text" disabled/>
    <input type="text" disabled/>
</div>

这样，您只需要两个“数据角色”来污染您的HTML。 “data-role”属性在jQuery中很常见（主要是由于Twitter Bootstrap小部件）。

然后，你只需要这个：

$("[data-role=source]").on("keyup", function(){
    var that = this;
    $($("[data-role=destination]").children()).each(function(index, item) {
        item.value = that.value;
    });
});

使用单个文本框在其他框中输入值

4 个答案: