jQuery input type="number" 的 onchange 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9609731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onchange event for input type="number"
提问by Ian Davis
How can I handle an onchange for <input type="number" id="n" value="5" step=".5" />? I can't do a keyupor keydown, because, the user may just use the arrows to change the value. I would want to handle it whenever it changes, not just on blur, which I think the .change()event does. Any ideas?
我如何处理 onchange for <input type="number" id="n" value="5" step=".5" />？我不能做 akeyup或keydown，因为用户可能只是使用箭头来更改值。我想在它发生变化时处理它，而不仅仅是模糊，我认为.change()事件确实如此。有任何想法吗？
回答by JohnColvin
Use mouseup and keyup
使用 mouseup 和 keyup
$(":input").bind('keyup mouseup', function () {
alert("changed");
});
回答by Flo
The oninputevent (.bind('input', fn)) covers any changes from keystrokes to arrow clicks and keyboard/mouse paste, but is not supported in IE <9.
的oninput事件（.bind('input', fn)）覆盖从击键任何改变箭头点击和键盘/鼠标粘贴，但在IE <9不被支持。
jQuery(function($) {
$('#mirror').text($('#alice').val());
$('#alice').on('input', function() {
$('#mirror').text($('#alice').val());
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="alice" type="number" step="any" value="99">
<p id="mirror"></p>回答by Jake Feasel
$(":input").bind('keyup change click', function (e) {
if (! $(this).data("previousValue") ||
$(this).data("previousValue") != $(this).val()
)
{
console.log("changed");
$(this).data("previousValue", $(this).val());
}
});
$(":input").each(function () {
$(this).data("previousValue", $(this).val());
});?
This is a little bit ghetto, but this way you can use the "click" event to capture the event that runs when you use the mouse to increment/decrement via the little arrows on the input. You can see how I've built in a little manual "change check" routine that makes sure your logic won't fire unless the value actually changed (to prevent false positives from simple clicks on the field).
这有点像贫民窟，但通过这种方式，您可以使用“单击”事件来捕获当您使用鼠标通过输入上的小箭头递增/递减时运行的事件。您可以看到我如何构建了一个小的手动“更改检查”例程，以确保您的逻辑不会触发，除非值实际更改（以防止简单点击字段导致误报）。
回答by Kingsley Ijomah
To detect when mouse or key are pressed, you can also write:
要检测何时按下鼠标或键，您还可以编写：
$(document).on('keyup mouseup', '#your-id', function() {
console.log('changed');
});
回答by AlienWebguy
$(':input').bind('click keyup', function(){
// do stuff
});
回答by SandroMarques
Because $("input[type='number']")doesn't work on IE, we should use a class name or id, for example, $('.input_quantity').
因为$("input[type='number']")不适用于 IE，所以我们应该使用类名或 id，例如$('.input_quantity').
And don't use .bind()method. The .on()method is the preferred method for attaching event handlers to a document.
并且不要使用.bind()方法。该.on()方法是将事件处理程序附加到文档的首选方法。
So, my version is:
所以，我的版本是：
HTML
HTML
<input type="number" value="5" step=".5" min="1" max="999" id="txt_quantity" name="txt_quantity" class="input_quantity">
jQuery
jQuery
<script>
$(document).ready(function(){
$('.input_quantity').on('change keyup', function() {
console.log('nice');
});
});
</script>
回答by Bruno Ribeiro
I had same problem and I solved using this code
我有同样的问题，我使用这段代码解决了
HTML
HTML
<span id="current"></span><br>
<input type="number" id="n" value="5" step=".5" />
You can add just 3 first lines the others parts is optional.
您可以只添加 3 行，其他部分是可选的。
$('#n').on('change paste', function () {
$("#current").html($(this).val())
});
// here when click on spinner to change value, call trigger change
$(".input-group-btn-vertical").click(function () {
$("#n").trigger("change");
});
// you can use this to block characters non numeric
$("#n").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || (e.keyCode === 65 && e.ctrlKey === true) || (e.keyCode >= 35 && e.keyCode <= 40))
return;
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105))
e.preventDefault();
});
Example here : http://jsfiddle.net/XezmB/1303/
这里的例子：http: //jsfiddle.net/XezmB/1303/
回答by N K
$("input[type='number']").bind("focus", function() {
var value = $(this).val();
$(this).bind("blur", function() {
if(value != $(this).val()) {
alert("Value changed");
}
$(this).unbind("blur");
});
});
OR
或者
$("input[type='number']").bind("input", function() {
alert("Value changed");
});
回答by Patrick Robles
<input type="number" id="n" value="0" step=".5" />
<input type="hidden" id="v" value = "0"/>
<script>
$("#n").bind('keyup mouseup', function () {
var current = $("#n").val();
var prevData = $("#v").val();
if(current > prevData || current < prevData){
$("#v").val(current);
var newv = $("#v").val();
alert(newv);
}
});
</script>
http://jsfiddle.net/patrickrobles53/s10wLjL3/
I've used a hidden input type to be the container of the previous value that will be needed for the comparison on the next change.
http://jsfiddle.net/patrickrobles53/s10wLjL3/
我使用了一个隐藏的输入类型作为下一个更改比较所需的上一个值的容器。
回答by James Allardice
There may be a better solution, but this is what came to mind:
可能有更好的解决方案，但这是我想到的：
var value = $("#yourInput").val();
$("#yourInput").on('keyup change click', function () {
if(this.value !== value) {
value = this.value;
//Do stuff
}
});
Here's a working example.
这是一个工作示例。
It simply binds an event handler to the keyup, changeand clickevents. It checks whether or not the value has changed, and if so, stores the current value so it can check again next time. The check is required to deal with the clickevent.
它只是将事件处理程序绑定到keyup,change和click事件。它检查该值是否已更改，如果已更改，则存储当前值以便下次再次检查。需要检查来处理click事件。
