<input type="number" /> 的值更改时会触发哪些事件？答案

【问题标题】：What events does an <input type="number" /> fire when its value is changed?<input type="number" /> 的值更改时会触发哪些事件？
【发布时间】：2011-04-25 19:28:44
【问题描述】：

只是想知道是否有人知道 HTML5 <input type="number" /> 元素在单击向上/向下箭头时会触发什么事件：

当焦点离开输入字段时，我已经在使用onblur。

【问题讨论】：

这好像是chrome的bug stackoverflow.com/questions/44978087/…

标签： javascript html

【解决方案1】：

有一个current bug in Edge 防止在数字输入中使用箭头键时触发更改或输入。

【讨论】：

【解决方案2】：

change 将是在字段值更改时触发的事件。

我认为 HTML5 事件 input 也会触发。

【讨论】：

只有oninput 会在单击“向上”和“向下”箭头时触发。
但 onchange 只在模糊时触发，至少在 Firefox 中。我想我们将不得不寻找按键。
onchange 和 oninput 都可以在 Opera 中使用，但只有 oninput 可以在 Chrome 中使用（只有当我从事件处理程序返回 false 时——否则 Chrome 会重复触发 oninput 事件）
change 在输入值时不会触发，只有在单击按钮时才会触发（至少在 Firefox 上）。
input 就像keyup change 之间的融合

【解决方案3】：

我发现对于 jQuery，以下代码涵盖了 Chrome 中的键盘输入、鼠标滚轮更改和按钮点击，并且还处理了 Firefox 中的键盘输入

$("input[type=number]").bind('keyup input', function(){
    // handle event
});

【讨论】：

也添加“更改”，这是完美的。你仍然想听它的外部变化，无论如何添加它也没有什么坏处。
如果您想在输入字段中获取滚动事件，还可以使用“鼠标滚轮”。
请注意，.bind() 现在已弃用，取而代之的是 .on()

【解决方案4】：

我发现 onkeyup 和 onchange 涵盖了 Chrome 19 中的所有内容。这处理直接值输入、向上向下箭头按键、单击按钮和滚动鼠标滚轮。

onchange 在 Chrome 中就足够了，但其他仅将字段呈现为文本框的浏览器需要 onkeyup 绑定，它可以完美地读取新值。

单独绑定mousewheel 事件不太成功。该事件触发得太早 - 在字段值更新之前 - 因此总是给出该字段的先前值

【讨论】：

Firefox 也是如此。

【解决方案5】：

onchange 事件在模糊时触发，但oninput 事件在您键入时触发。也许您可能想在oninput 事件上设置一个计时器，并在用户停止输入一秒钟后触发您的onchange 事件？

【讨论】：