检测 Webkit/Chrome 中 HTML5 数字控件更改的事件？答案

【问题标题】：Event to detect change of an HTML5 number control in Webkit/Chrome?检测 Webkit/Chrome 中 HTML5 数字控件更改的事件？
【发布时间】：2011-04-15 04:14:36
【问题描述】：

HTML5 为我们提供了一些新的输入元素，例如<input type=number>。这将（在 Chrome 中）呈现为一个文本框，在文本框内有两个循环按钮，用于递增和递减框中的数值。

对于个人爱好项目，我正在使用此控件。但是，我遇到了一个问题：

有没有办法使用 javascript 事件检测正在更改的值？我曾预计onChange 事件会触发，但没有这样的运气。另外，onClick 仅在单击文本框内容时触发，而不是在单击循环按钮时触发。

有什么想法吗？（除了：嘿，它是 HTML5 表单，别指望任何东西都可以工作！）

编辑： 正如 mikerobi 在下面指出的那样，一旦元素失去焦点，onChange 事件就会触发。仍然不是我想要的，所以欢迎其他 cmet 和建议！

【问题讨论】：

标签： javascript forms html google-chrome

【解决方案1】：

错误报告的结果：不会修复，因为按下这些按钮时会触发 input 事件。它是 HTML5 规范的一部分。所以问题解决了，感谢mikerobi 的建议提交报告。

【讨论】：

这在 Safari 中是否适合您？我使用的是 Safari 5.0.3 (mac)，只有当我更改文本框中的数字时才会触发输入事件，而不是当我点击这些按钮时。
Safari v5.0.4 不会触发change 事件，即使您模糊输入，也不会触发input 事件单击微调器。似乎是 <input type="number"> 周围的一个 Safari 错误。
但是请注意，最新的 WebKit nightly 版本中的行为是正确的，所以最终这个修复应该会进入 Safari。

【解决方案2】：

当框失去焦点时，onChange 事件会被触发，但您可能已经知道这一点。

HTML5 规定数字输入应该是文本框或微调器控件，但该规范似乎没有关于微调器的外观或行为的任何准则，这些决定由浏览器供应商决定。

似乎在 Mac Safari 中，旋转按钮确实响应点击事件，您可能想要提交 Chrome 错误报告，我怀疑这只是一个疏忽。

【讨论】：

嗨 Mikerobi - 是的，应该补充说我已经发现了模糊变化的东西.. 谢谢你提到它。我会去提交那个错误报告，谢谢！
您使用的是哪个 Safari？我的（Windows 上为 5.0.2）根本不支持数字类型，并将其呈现为纯文本框：/

【解决方案3】：

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

【讨论】：