Question

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

如果用户删除了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>

有什么想法吗？

Answer 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);
    });

Answer 2

如果你正在使用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/

Answer 3

在第一个元素onchange()

上调用onblur方法

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

Answer 4

尝试使用keyup事件

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

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

})

Answer 5

尝试类似：

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

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

Answer 6

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

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

Answer 7

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 8

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

每次按下一个键，它将在下一个执行堆栈上执行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=""/>

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

8 个答案: