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

Question

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

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

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