HTML5 number spinbox controls not triggering a cha

问题:

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.

回答1:

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

回答2:

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.

回答3:

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

回答4:

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.