javascript - 通过 jquery 设置输入字段的值并不总是刷新该字段

Question

我在通过 jquery 计算和显示输入字段中的数字时遇到问题。 考虑到我有两个输入字段，第一个输入字段接受一个数字，第二个输入字段显示该数字 + 100。 只要您通过键盘在第一个字段中输入数字，它就可以正常工作。然而，使用输入字段右侧的小箭头按钮更改数字并不总是立即刷新第二个输入字段，特别是如果您尝试“敲击”这些小箭头按钮:如果您继续单击它们，数字不会刷新，直到您移动鼠标(使用 win 10 和 google chrome 进行测试)。

我找到了有关此问题的几个主题，并尝试了不同的方法(请参阅注释的代码行)，但没有一个适用于这种情况。

$(document).ready(function() {
  $('#inp_1').on('keyup', function() {
    calc();
  });

  $('#inp_1').on('change', function() {
    calc();
  });

  function calc() {
    var old_val = parseInt($('#inp_1').val());
    var new_val = old_val + 100;

    $('#inp_2').val(new_val);

    /*
    $("#inp_2").attr('value', new_val);
    $("#inp_2").trigger("change");
    */

    //$("#inp_2").attr('defaultValue', newVal);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="number" step="1" id="inp_1" value="">
<input type="number" step="1" id="inp_2" value="">

Answer 1

只需在第一个输入上调用 calc() 并使用单击事件

$(document).ready(function() {
  $('#inp_1').on('keyup click', function() {
    calc();
  });

  $('#inp_1').on('change', function() {
    calc();
  });

  function calc() {
    var old_val = parseInt($('#inp_1').val());
    var new_val = old_val + 100;

    $('#inp_2').val(new_val);

    /*
    $("#inp_2").attr('value', new_val);
    $("#inp_2").trigger("change");
    */

    //$("#inp_2").attr('defaultValue', newVal);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="number" step="1" id="inp_1" value="">
<input type="number" step="1" id="inp_2" value="">