HTML 输入类型号 JavaScript onchange 触发两次？

Question

我不敢相信我已经找不到任何关于此的讨论... 有关于如何处理来自 HTML5 表单元素的事件的问题<input type="number"/>...There seems to be a good bit of browser inconsistency so far. 但没有其他人注意到这个？

当我使用箭头键从空白变为数字时，onchange 事件发生了两次。 Try for yourself. 似乎瞬间变为 0，然后变为 1。我使用的是 Chrome 23.0.1271.64 m。其他浏览器没试过。

这是一个错误吗？预期的？跨浏览器类似吗？一个更好的问题是，避免这种行为的最佳方法是什么？我正在进行一些即时验证工作，并且 0 无效，我友好的“你不能那样做”文本会在再次消失之前出现一闪而过。在上面链接的问题中，建议使用“oninput”事件，但在跨浏览器的工作方式上存在一些分歧。

我想最好的方法是完全忘记数字类型，因为它本身还没有完全支持。我很想看看其他人是否得到了这个，以及他们是如何处理它的。

Answer 1

我复制了它。

如果输入开始为空白。第一次按下向上或向下按钮时，会将其设置为0，然后将其设置为1 或-1。

这不是错误。

这对你来说很方便！它不必从 0 开始，它可以从 100000000000000000 开始，但它没有:-)

---

如果输入不以空白开头，那么您没有任何问题。

Answer 2

这确实是一个好点。

但首先：避免这种情况的方法

设置焦点处理程序 onfocus 保存值。设置模糊处理程序 onblur 比较当前值与保存的值，如果值已更改触发/调度/触发 'comittedchange' 事件。 -> 使用 commitedchange 事件而不是 busted 更改事件 :-)

这里有一些想法。但请先阅读change event 的 HTML5 规范。

现在是一些历史

HTML4 规范有不同的定义（如果 value/checkednes 发生变化并且元素被激活或未聚焦事件发生），这对复选框和单选按钮来说是一件坏事（这就是人们使用点击的原因而不是这些元素（或 jQuery）的更改事件）。

新的 HTML5 规范

新规范结合了第一个定义并添加了一些额外的称为“显式提交操作”。实际上我并不真正理解这意味着什么，但我敢肯定，当用户在旋转按钮（类型=数字）上按下鼠标时，该用户尚未执行提交操作，他仍在与表单交互并且仍然可能会进行输入/更改。

另外，HTML5 添加了输入事件，以“更快地”通知开发人员一些非最终更改。例如，将其与 datalist 元素结合并允许动态更改，即创建自动建议。

现实：浏览器

如果输入类型带有旋转按钮（类型编号、时间等）。 Opera 和 Chrome 的行为非常相似（与微调按钮交互触发输入和更改），Safari 触发更改 onblur。在 type=range 的情况下，所有浏览器都在处理它。 change 事件和 input 事件一直触发，同时拖动鼠标。好吧，我们有两个不同的事件，具有不同的规范和用例，但它们在现实中做的是同样的事情（是的）。

现实：开发者

嗯，有很多教程和脚本在用例中使用 type=range 的 change 事件，这应该取而代之的是 input 事件，但是如您所知，开发人员很愚蠢，只阅读规范的 1% .

故事结束

旧的定义很糟糕，使它毫无用处。新规范得到了改进，但无法理解，被误用并且实施不当......现在？我认为没有人愿意打破旧的糟糕的 HTML5 教程/脚本代码。

如果你想改变be my hero。