Javascript 将一个字段的文本自动复制到另一个字段中

Copy text of a field into another automatically

提问by adrian.m123

I need to copy the text entered in a field (whether it was typed in, pasted or from browser auto-filler) and paste it in another field either at the same time or as soon as the user changes to another field.

我需要复制在一个字段中输入的文本（无论是输入、粘贴还是从浏览器自动填充器中输入），并同时或在用户更改到另一个字段时将其粘贴到另一个字段中。

If the user deletes the text in field_1, it should also get automatically deleted in field_2.

如果用户删除了 field_1 中的文本，它也应该在 field_2 中自动删除。

I've tried this but it doesn't work:

我试过这个，但它不起作用：

<script type="text/javascript">
$(document).ready(function () {

function onchange() {
var box1 = document.getElementById('field_1');
var box2 = document.getElementById('field_2');
box2.value = box1.value;
}
});
</script>

Any ideas?

有任何想法吗？

回答by LcSalazar

You are almost there... The function is correct, you just have to assign it to the changeevent of the input:

你快到了......函数是正确的，你只需要将它分配给change输入的事件：

<script type="text/javascript">
    $(document).ready(function () {

        function onchange() {
            //Since you have JQuery, why aren't you using it?
            var box1 = $('#field_1');
            var box2 = $('#field_2');
            box2.val(box1.val());
        }
        $('#field_1').on('change', onchange);
    });

回答by Kirill Rogovoy

If you are using jQuery, it is very easy - you need just register the right function on the right event :)

如果您使用的是 jQuery，这很容易 - 您只需要在正确的事件上注册正确的函数:)

Here's the code:

这是代码：

<input id="foo" />
<input id="bar" />

$(function(){
    var $foo = $('#foo');
    var $bar = $('#bar');
    function onChange() {
        $bar.val($foo.val());
    };
    $('#foo')
        .change(onChange)
        .keyup(onChange);
});

JSFiddle: http://jsfiddle.net/6khr8e2b/

JSFiddle：http: //jsfiddle.net/6khr8e2b/

回答by indubitablee

$(document).ready(function() {
 $('.textBox1').on('change', function() {
   $('.textBox2').val($(this).val());
 }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="textBox1"/>
<input type="text" class="textBox2"/>

回答by Hacketo

If you want that the value of the second field is updated as the same time that the first one, you could handle this with a timeout.

如果您希望第二个字段的值与第一个字段的值同时更新，则可以使用超时来处理此问题。

Each time a key is pressed, it will execute the checkValuefunction on the next stack of the execution. So the value of the field1in the DOMwill already be updated when this function is called.

每次按下一个键，它都会checkValue在下一个执行堆栈上执行该函数。所以当这个函数被调用时，field1中的值DOM已经被更新了。

var $field1 = $("#field_1");
var $field2 = $("#field_2");

$field1.on("keydown",function(){
   setTimeout(checkValue,0); 
});

var v2 = $field2.val();
var checkValue = function(){
    var v1 = $field1.val();
    if (v1 != v2){
        $field2.val(v1);
        v2 = v1;
    }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="field_1" value=""/><br/>
<input id="field_2" value=""/>

回答by Ramesh Kotha

Call onchange()method on the first element onblur

onchange()在第一个元素上调用方法onblur

<input type="text" id="field_1" onblur="onchange()"/>

回答by napster3world

try with keyup event

尝试使用 keyup 事件

 <input type="text" id="box_1"/>
<input type="text" id="box_2"/>
$('#box_1').keyup(function(){

$('#box_2').val($(this).val());

})

回答by DanielPanic

Try something like:

尝试类似：

$(document).ready(function () {
    $('#field_1').on('change', function (e) {
       $('#field_2').val($('#field_1').val());
    });
});

Heres a fiddle: http://jsfiddle.net/otwk92gp/

这是一个小提琴：http: //jsfiddle.net/otwk92gp/

回答by wahwahwah

You need to bind the first input to an event. Something like this would work:

您需要将第一个输入绑定到一个事件。像这样的事情会起作用：

$(document).ready(function(){
    $("#a").change(function(){
        var a = $("#a").val();
        $("#b").val(a);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="a" />
<input type="text" id="b" />