Chrome 上的数字输入类型和 jquery.on('change') 函数的意外行为

Question

我有一个数字输入类型和一个 jQuery .on('change') 函数，该函数在每次输入值更改时运行。

当使用 chrome 时，如果您连续单击输入上的箭头以增加或减少值（将鼠标留在箭头的可单击区域内），该函数会先触发几次，然后只是停止。如果您随后将鼠标移出箭头的可点击区域，JavaScript 函数就会运行。

有人知道我该如何处理吗？或者是否有任何解决方法。

请看下面的例子。

$('#number').on('change', function(){
 console.log('change');
});

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

Answer 1

好吧，很容易避免。 Change 仅在元素丢失 focus 时触发。但是你在这里基本上做的是click，所以使用那个事件和keyup如果有人使用键盘输入一个值。

这是一个有效的 fiddle:

$('#number').on('keyup click', function(){
 console.log('change');
});

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

Answer 2

另一个效果很好的事件是 input。每次更改输入时都会触发（无论是通过单击还是按键输入）：

$('#number').on('input', function(){
 console.log('change');
});

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