我有一个输入类型的数字和一个jQuery .on('change')
函数,每次输入值发生变化时都会运行。
使用镶边时,如果你不断点击输入上的箭头来增加或减少数值(将鼠标留在箭头的可点击区域内),该功能会在前几次触发,然后停止。如果然后将鼠标移动到箭头的可点击区域之外,则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"/>
&#13;
答案 0 :(得分:6)
这很容易避免。 Change
仅在元素丢失focus
时触发。但你在这里基本上做的是click
,所以如果有人使用键盘输入值,请使用该事件和keyup
。
这是一个工作小提琴:
$('#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;
答案 1 :(得分:0)
另一个效果很好的事件是input
。每次输入改变时都会触发(无论是通过点击还是按键输入):
$('#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;