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

【问题标题】：Copy text of a field into another automatically将一个字段的文本自动复制到另一个字段中
【发布时间】：2015-02-05 18:36:39
【问题描述】：

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

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

我试过了，但它不起作用：

<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>

有什么想法吗？

【问题讨论】：

您是否将onchange 事件绑定到任何东西？

标签： javascript jquery html

【解决方案1】：

你快到了...函数是正确的，你只需要将它分配给输入的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);
    });

【讨论】：

@DanielPanic 你能建议如何优化它吗？

【解决方案2】：

$(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"/>

【讨论】：

【解决方案3】：

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

代码如下：

<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/

【讨论】：

额外的好处是你使用change和keyup这两个事件

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

尝试 keyup 事件

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

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

})

【讨论】：

【解决方案6】：

尝试类似：

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

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

【讨论】：

【解决方案7】：

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

$(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" />

【讨论】：

【解决方案8】：

如果您希望第二个字段的值与第一个字段的值同时更新，您可以通过超时来处理。

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

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=""/>

【讨论】：