当 < input type = “ number”/> 的值被更改时,触发什么事件?

只是想知道是否有人知道当单击 HTML5<input type="number" />元素的向上/向下箭头时会触发什么事件:

example number input

当焦点离开输入字段时,我已经使用了 onblur

96646 次浏览

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

I think the HTML5 event input would also fire.

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?

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

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
});

There is a current bug in Edge preventing change or input from firing when using the arrow keys in a number input.