Question

我有一个输入类型的数字和一个jQuery .on('change')函数，每次输入值发生变化时都会运行。

使用镶边时，如果你不断点击输入上的箭头来增加或减少数值（将鼠标留在箭头的可点击区域内），该功能会在前几次触发，然后停止。如果然后将鼠标移动到箭头的可点击区域之外，则JavaScript函数将运行。

任何人都知道我该如何处理这个问题？或者如果有任何解决方法。

请参阅下面的示例。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

这是一个工作小提琴：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;