What events does an fire when its value is changed?

Question

Just wondering whether anyone knows what events an HTML5 <input type="number" /> element fires when its up / down arrows are clicked:

example number input

I'm already using an onblur for when the focus leaves the input field.

This seems to be a bug of chrome https://stackoverflow.com/questions/44978087/html5-number-type-inputs-up-down-arrow-imprecise-click-bug — Oriol Jiménez, Jun 26 '18 at 07:04

score 85 · Accepted Answer · edited Sep 04 '13 at 11:35

85

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

I think the HTML5 event input would also fire.

edited Sep 04 '13 at 11:35

alex

479,566
201
878
984

answered Oct 15 '10 at 07:30

Jacob Relkin

161,348
33
346
320

44

only `oninput` is fired when 'up' and 'down' arrows are clicked. – N 1.1 Oct 15 '10 at 07:36
2

but onchange only fires on blur, atleast in firefox. I guess we will have to look for key press. – andho Oct 15 '10 at 07:45
onchange and oninput both worked in Opera, but only oninput would work in Chrome (and only then when I returned false from the event-handler - otherwise Chrome would repeatedly fire the oninput event) – Ian Oxley Oct 15 '10 at 07:51
@N 1.1: `oninput` IS fired when a character is insert into the field – andho Oct 15 '10 at 07:51
2

`change` does not fire when the value is typed in, only when the buttons are clicked (at least on Firefox). – Timmmm Jul 01 '15 at 08:04
5

`input` is like a fusion between `keyup change` – Thanh Trung Mar 21 '17 at 10:53

score 41 · Answer 2 · answered Apr 09 '13 at 10:37

41

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

answered Apr 09 '13 at 10:37

Will Moore

552
5
11

2

Add 'change' to that too and it's perfect. You'll still want to listen for external changes to it too, and there's no harm in adding it anyway. – Matt Fletcher Sep 16 '16 at 11:17
And also 'mousewheel' if you want to pick up on scroll events inside the input field. – Matt Fletcher Sep 16 '16 at 11:17
5

Note that `.bind()` is now deprecated in favor of `.on()` – Michael Hays May 10 '17 at 18:31

score 7 · Answer 3 · answered May 24 '12 at 12:42

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

This is also true for Firefox. – barfuin Feb 18 '18 at 20:47 — barfuin, Feb 18 '18 at 20:47

score 5 · Answer 4 · answered Oct 15 '10 at 07:50

5

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?

answered Oct 15 '10 at 07:50

andho

1,166
1
15
27

score 3 · Answer 5 · answered Feb 26 '18 at 08:02

3

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

answered Feb 26 '18 at 08:02

Lucent

1,614
1
19
22

What events does an fire when its value is changed?

5 Answers5

Linked

Related