使用jQuery匹配更改的输入值

Question

我有两个输入，我想在输入一个输入值时具有相同的输入值。这是有效的，但不是一直。我将在这里留下代码：

$('#google-querynav').keypress(function() {
    var text = $(this).val();
    $('#google-querystat').attr('value', text);
})
$('#google-querystat').keypress(function() {
    var text = $(this).val();
    $('#google-querynav').attr('value', text);
})

感谢您的帮助

Answer 1

您需要使用change和keyup事件来完成此工作。另外，您可以使用 val() 方法来更改input的值，而不是attr("value")。

$('#google-querynav').on("change keyup", function() {
    var text = $(this).val();
    $('#google-querystat').val(text);
})
$('#google-querystat').on("change keyup",function() {
    var text = $(this).val();
    $('#google-querynav').val(text);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="google-querynav"/>
<input type="text" id="google-querystat"/>

您可以使用较短的代码执行此操作

$('#google-querynav, #google-querystat').on("keyup change", function() {
    var text = $(this).val();
    $('#google-querynav, #google-querystat').val(text);
})

在 jsfiddle

Answer 2

使用keyup代替keypress。并使用val代替attr

$('#google-querynav').on('keyup change', function() {
    var text = $(this).val();
    $('#google-querystat').val(text);
})
$('#google-querystat').on('keyup change', function() {
    var text = $(this).val();
    $('#google-querynav').val(text);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="google-querynav">
<input id="google-querystat">