jQuery onchange事件不会同步更改值

Question

我试图使用jQuery同步将1输入字段的值提交给相同形式的其他输入字段。 我实现的是，当用户从第一字段更改焦点时，第二字段中的值更改了，而我想要实现的是，当用户在第一字段中更改了第二字段时，更改了第二字段的值。 这是我的HTML

<div class="form-group">
<label class="form-label">Rate</label>
<div class="form-field">
<input type="text" name="rate_value" id="rate_value">
</div>
</div>

<div class="form-group">
<label class="form-label">Amount</label>
<div class="form-field">
<input type="text" name="amount" id="amount" disabled>
</div>
</div>

这是我的jQuery代码

var rate_value;
var amount;
$("#rate_value").on('change', function(){
    amount = $("#rate_value").val();
    $("#amount").val(amount);
});

Answer 1

如果要在按下每个键后更新禁用的输入，请使用keyup事件

 var rate_value; var amount; $("#rate_value").on('keyup', function() { amount = $("#rate_value").val(); $("#amount").val(amount); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="form-group"> <label class="form-label">Rate</label> <div class="form-field"> <input type="text" name="rate_value" id="rate_value"> </div> </div> <div class="form-group"> <label class="form-label">Amount</label> <div class="form-field"> <input type="text" name="amount" id="amount" disabled> </div> </div> 

更新：您可以使用input事件，该事件在input或textarea元素的值更改时触发。 它比keyup事件更好，它仅在释放按下的键之后才触发。 更改值时将触发input事件。

 var rate_value; var amount; $("#rate_value").on('input', function() { amount = $("#rate_value").val(); $("#amount").val(amount); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="form-group"> <label class="form-label">Rate</label> <div class="form-field"> <input type="text" name="rate_value" id="rate_value"> </div> </div> <div class="form-group"> <label class="form-label">Amount</label> <div class="form-field"> <input type="text" name="amount" id="amount" disabled> </div> </div>