HTML5 number spinbox controls not triggering a change event?

Question

We are currently using jQuery to trigger a recalculation on a form input field. Using HTML5 we get nice spinboxes in Safari (at least on 5.0.3 Mac). However updating the field with the spinbox controls doesn't seem to trigger a change event at all. It's like the field hasn't been updated. Is this just an oversight in WebKit? Or are there ways around this?

Edit: Changing the spinbox doesn't even trigger an input event.

score 1 · Answer 1 · answered Feb 10 '11 at 21:06

1

You want to use the oninput event. Use something like $("...").bind("input", fn);.

See http://msdn.microsoft.com/en-us/library/gg592978(VS.85).aspx

answered Feb 10 '11 at 21:06

gilly3

87,962
25
144
176

Yeah, even with binding both input and change that was no dice. :/ – Erik Veland Feb 11 '11 at 04:31
1

Looks like the solution for now is to forego and rather use – Erik Veland Feb 11 '11 at 04:35

score 1 · Answer 2 · answered Apr 14 '11 at 20:14

1

$.click() works fine. If you click and hold, it doesn't until you release.

answered Apr 14 '11 at 20:14

hookedonwinter

12,436
19
61
74

score 0 · Answer 3 · answered Feb 10 '11 at 03:25

0

change event is triggered when input lost focus and the value is changed, by clicking the spinbox, input does not lost its focus, so change event will not fired.

answered Feb 10 '11 at 03:25

otakustay

11,817
4
39
43

That makes a lot of sense in explaining why (even if it is a bit illogical that the field wouldn't fire a change event when it has clearly been changed, focus or no). – Erik Veland Feb 11 '11 at 04:09
However, the `change` event still doesn't fire when you defocus the field. Seems to be a bug. – Phrogz Mar 23 '11 at 18:41

score 0 · Answer 4 · answered May 06 '11 at 14:30

This works for me in Chrome 11 and Opera 11.10:

<fieldset class="col" oninput="exoutput.value = exnumber.valueAsNumber * exnumber.valueAsNumber;"> 
    <legend>Output event handler</legend> 
    <label for="exnumber">Number: </label> 
    <input type="number" id="exnumber" placeholder="Enter a number" min="0" value="4" required>  
    <label for="exoutput">Output: </label> 
    <output for="exnumber" id="exoutput">16</output> 
</fieldset>

Firefox 4 doesn't do valueAsNumber, but a minor change makes it work in all three. Sorry I don't have Safari available to test on right now.

HTML5 number spinbox controls not triggering a change event?

4 Answers4

Linked