What events does an <input type="number" /> fire when its value is changed?
Just wondering whether anyone knows what events an HTML5 <input type="number" />
element fires when its up /开发者_开发知识库 down arrows are clicked:
I'm already using an onblur
for when the focus leaves the input field.
change
would be the event that is fired when the field's value changes.
I think the HTML5 event input
would also fire.
I found that for jQuery the following code covered keyboard input, mousewheel changes and button clicks in Chrome, and also handled keyboard input in Firefox
$("input[type=number]").bind('keyup input', function(){
// handle event
});
I found that onkeyup
and onchange
covered everything in Chrome 19.
This handles direct value input, up down arrow keypress, clicking the buttons and scrolling the mousewheel.
onchange
alone would be sufficient in Chrome, but other browsers that only render the field as a text box need the onkeyup
binding, which works perfectly to read the new value.
Binding the mousewheel
event separately was less successful. The event fired too early - before the field value was updated - and therefore always gave the field's previous value
The onchange
event fires on blur but the oninput
event fires as you type. Maybe you might want to put a timer on the oninput
event and fire your onchange
event when the user has stopped typing for a second?
There is a current bug in Edge preventing change or input from firing when using the arrow keys in a number input.
精彩评论