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

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

javascript jquery html

Javascript 使用单个文本框在其他框中输入值,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试创建文本框，用于在其他4个文本框中逐个输入值我尝试了下面的代码，但它只复制到一个文本框 <html> <head> <script> function copy_data(val){ var a = document.getElementById(val.id).value document.getElementById("copy_to").value=a } </script

我正在尝试创建文本框，用于在其他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>


功能复制_数据（val）{
var a=document.getElementById（val.id）.value
document.getElementById（“复制到”）.value=a
}
在这里输入代码

注意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;
         }
    }

功能复制_数据（val）{
var elem_list=document.getElementsByName（'a'）；
对于（变量i=1；i

注意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;
         }
    }

功能复制_数据（val）{
var elem_list=document.getElementsByName（'a'）；
对于（变量i=1；i

演示
Id
是唯一的，请执行此操作。i、 e.改用class
属性
*API:
希望这符合您的需要：）

代码
$(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/>


在这里输入代码
演示
Id
是唯一的，请执行此操作。i、 e.改用class
属性
*API:
希望这符合您的需要：）

代码
$(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/>


在这里输入代码
尝试此操作（按Enter键复制值）：



在这里输入代码
var计数=0；
功能复制_数据（val、事件）{
如果（event.keyCode==13）{
如果（计数尝试此操作（按Enter键复制值）：



在这里输入代码
var计数=0；
功能复制_数据（val、事件）{
如果（event.keyCode==13）{
如果（count事实上，class不是最好的属性，因为它被认为是应用样式而不是识别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>

实际上，类并不是最好的属性，因为它被认为是应用样式而不是识别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 ID属性应该是100%唯一的。如果您必须重复类似的内容，请使用一个类。您还可以删除JS函数的整行内容。您将此
发送到函数中，因此获取ID是多余的。document.getElementById（“copy_to”）.value=val.value；
是完全相同的。您不能对多个元素使用重复的同一ID。它应该是唯一的。或者您可以对元素使用备用ID is类属性。HTML ID属性应该是100%唯一的。如果您必须重复类似的内容，请使用类。此外，您还可以删除JS函数的整行。您可以将此
发送到函数中，因此获取ID是多余的。document.getElementById（“copy_to”）.value=val.value；
完全相同您不能对多个元素使用重复的相同ID。它应该是唯一的。或者您可以对元素使用alternate for ID is CLASS属性。