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>

jQuery onchange 事件不同步改变值

jQuery onchange event doesn't change value synchronously

jquery

onchange