输入 type = “ number”的 onchange 事件

小开

$(":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).

小开

最佳答案

Use mouseup and keyup

$(":input").bind('keyup mouseup', function () {
alert("changed");
});

http://jsfiddle.net/XezmB/2/

小开

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, change and click events. 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 click event.

小开

$(':input').bind('click keyup', function(){
// do stuff
});

Demo: http://jsfiddle.net/X8cV3/

小开

The oninput event (.bind('input', fn)) covers any changes from keystrokes to arrow clicks and keyboard/mouse paste, but is not supported in 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>

小开

$("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");
});

小开

<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.

小开

To detect when mouse or key are pressed, you can also write:

$(document).on('keyup mouseup', '#your-id', function() {
console.log('changed');
});

小开

Because $("input[type='number']") doesn't work on IE, we should use a class name or id, for example, $('.input_quantity').

And don't use .bind() method. The .on() method is the preferred method for attaching event handlers to a document.

So, my version is:

HTML

<input type="number" value="5" step=".5" min="1" max="999" id="txt_quantity" name="txt_quantity" class="input_quantity">

jQuery

<script>
$(document).ready(function(){
$('.input_quantity').on('change keyup', function() {
console.log('nice');
});
});
</script>

小开

I had same problem and I solved using this code

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.

$('#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/

小开

Just write a function in plain javascript and call it in the HTML code:

<input type="number" onchange="onChangeFunction(this.value)">