Chrome上的数字输入类型和jquery。('更改')功能的意外行为

时间:2017-07-19 13:14:37

标签: javascript jquery google-chrome onchange

我有一个输入类型的数字和一个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;
&#13;
&#13;

2 个答案:

答案 0 :(得分:6)

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

这是一个工作小提琴:

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;