What Events Does an <Input Type="Number" /> Fire When Its Value Is Changed

What events does an input type=number / fire when its value is changed?

change would be the event that is fired when the field's value changes.

I think the HTML5 event input would also fire.

onchange event for input type=number

Use mouseup and keyup

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

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

What JQuery event fires when you change the value (and hold) of an input type number?

Using 'input' Event

$('[type="number"]').on('input', function(e) {  console.log(e.type)})

Use keyboard arrows or Input's UI arrows:<br><input type="number" name=""><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Best way to track onchange as-you-type in input type=text?

Update:

See Another answer (2015).

---

Original 2009 Answer:

So, you want the onchange event to fire on keydown, blur, and paste? That's magic.

If you want to track changes as they type, use "onkeydown". If you need to trap paste operations with the mouse, use "onpaste" (IE, FF3) and "oninput" (FF, Opera, Chrome, Safari¹).

¹_{Broken for <textarea> on Safari. Use textInput instead}

onchange event on input type=range is not triggering in Firefox while dragging

Apparently Chrome and Safari are wrong: onchange should only be triggered when the user releases the mouse. To get continuous updates, you should use the oninput event, which will capture live updates in Firefox, Safari and Chrome, both from the mouse and the keyboard.

However, oninput is not supported in IE10, so your best bet is to combine the two event handlers, like this:

<span id="valBox"></span>
<input
  type="range"
  min="5"
  max="10"
  step="1"
  oninput="showVal(this.value)"
  onchange="showVal(this.value)"
/>

Check out this Bugzilla thread for more information.

html input type=text / onchange event not working

onchange is only triggered when the control is blurred. Try onkeypress instead.

Event when input value is changed by JavaScript?

Based on @t-j-crowder and @maciej-swist answers, let's add this one, with ".apply" function that prevent infinite loop without redefining the object.

 function customInputSetter(){

  var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
  var originalSet = descriptor.set;

  // define our own setter
  descriptor.set = function(val) {
    console.log("Value set", this, val);
    originalSet.apply(this,arguments);
  }

  Object.defineProperty(HTMLInputElement.prototype, "value", descriptor);
}

jQuery - Detect value change on hidden input field

So this is way late, but I've discovered an answer, in case it becomes useful to anyone who comes across this thread.

Changes in value to hidden elements don't automatically fire the .change() event. So, wherever it is that you're setting that value, you also have to tell jQuery to trigger it.

function setUserID(myValue) {
     $('#userid').val(myValue)
                 .trigger('change');
}

Once that's the case,

$('#userid').change(function(){
      //fire your ajax call  
})

should work as expected.

How to detect input type=file change for the same file?

You can trick it. Remove the file element and add it in the same place on change event. It will erase the file path making it changeable every time.

Example on jsFiddle.

Or you can simply use .prop("value", ""), see this example on jsFiddle.

• jQuery 1.6+ prop
• Earlier versions attr

---

Related Topics