HTML5数字旋转框控件不触发更改事件？答案

【问题标题】：HTML5 number spinbox controls not triggering a change event?HTML5数字旋转框控件不触发更改事件？
【发布时间】：2011-05-06 22:30:41
【问题描述】：

我们目前正在使用 jQuery 来触发对表单输入字段的重新计算。使用 HTML5，我们在 Safari 中获得了不错的旋转框（至少在 5.0.3 Mac 上）。但是，使用 spinbox 控件更新字段似乎根本不会触发更改事件。这就像该字段尚未更新。这只是 WebKit 中的一个疏忽吗？或者有没有办法解决这个问题？

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

【问题讨论】：

标签： javascript jquery html safari

【解决方案1】：

您想使用oninput 事件。使用 $("...").bind("input", fn); 之类的东西。

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

【讨论】：

是的，即使绑定了输入和更改也不是骰子。 ://
看起来现在的解决方案是放弃而是使用

【解决方案2】：

$.click() 工作正常。如果您单击并按住，直到您释放它才会这样做。

【讨论】：

【解决方案3】：

当输入失去焦点并改变值时触发change事件，通过点击旋转框，输入不会失去焦点，因此不会触发change事件。

【讨论】：

这在解释原因方面很有意义（即使该字段在明显更改时不会触发更改事件，无论是否关注焦点有点不合逻辑）。
但是，当您散焦该字段时，change 事件仍然不会触发。似乎是一个错误。

【解决方案4】：

This works for me 在 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，而是 a minor change makes it work in all three。抱歉，我现在没有 Safari 可供测试。

【讨论】：