HTML5数字旋转框控件无法触发更改事件？

Question

我们目前使用jQuery来触发表单输入字段的重新计算。在Safari中，使用HTML5可以得到漂亮的旋转框（至少在Mac 5.0.3上）。然而，使用旋转框控件更新字段似乎根本不会触发任何更改事件。就好像该字段根本没有被更新一样。这只是WebKit中的疏忽吗？还是有其他解决方法？

编辑：甚至更改旋转框都不会触发输入事件。

- Erik Veland

Answer 1

$.click() 运行良好。如果你点击并按住，它不会生效，直到你松开。

- hookedonwinter

Answer 2

你想要使用 oninput 事件。可以使用类似这样的代码 $("...").bind("input", fn);。

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

- gilly3

---

是的，即使绑定了输入和更改，也没有用。 :/ - Erik Veland

目前看来，解决方案是放弃使用<input type="number">，而改用<input type="text" pattern="[0-9]>, 这样在iOS和其他移动设备上都能产生所需的结果。 - Erik Veland

Answer 3

这在Chrome 11和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不支持valueAsNumber，但是一个小改动可以让它在所有三个浏览器上都能工作。很抱歉我现在没有Safari可供测试。

- robertc

Answer 4

当输入框失去焦点并更改值时，将触发“change”事件。但是，如果通过单击“spinbox”来更改值，则输入框不会失去焦点，因此“change”事件不会被触发。

- otakustay

---

这在解释为什么（即使字段明显已更改，无论是否聚焦，该字段不会触发更改事件，这可能有点不合逻辑）方面非常有道理。 - Erik Veland

然而，当您取消焦点时，“更改”事件仍不会触发。看起来是一个错误。 - Phrogz