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

93

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

示例编号输入

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

javascript html

— 伊恩·奥克斯利（Ian Oxley）
source

这似乎是镀铬的一个bug stackoverflow.com/questions/44978087/...

— 奥里奥尔·希门尼斯

73

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

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

— 雅各布·雷金
source

36

oninput单击“向上”和“向下”箭头时仅触发。

— N 1.1

2

但是onchange仅在模糊时触发，至少在Firefox中触发。我想我们将不得不寻找按键。

— andho

onchange和oninput都可以在Opera中使用，但只有oninput才能在Chrome中使用（并且只有当我从事件处理程序返回false时，否则Chrome才会反复触发oninput事件）

— Ian Oxley 2010年

2

change仅在单击按钮时（至少在Firefox上），键入值时不会触发。

— Timmmm

5

input像之间的融合keyup change

— 清忠

37

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

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

— 威尔·摩尔
source

2

还要添加“更改”，这是完美的。您仍然仍然想听听它的外部更改，无论如何添加它都没有害处。

— 马特·弗莱彻

如果您想了解输入字段中的滚动事件，还可以使用“鼠标滚轮”。

— 马特·弗莱彻

4

请注意，.bind()现在废弃了的.on()

— 迈克尔·海斯

7

我发现了这一点，onkeyup并onchange涵盖了Chrome 19中的所有内容。它可以处理直接值输入，上下箭头键按下，单击按钮以及滚动鼠标滚轮的过程。

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

mousewheel单独绑定事件不太成功。该事件触发得太早-在更新字段值之前-因此始终提供该字段的先前值

— 尼尔·金
source

对于Firefox也是如此。

— barfuin

5

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

— 安德霍
source

3

在数字输入中使用箭头键时，Edge中存在当前的错误，阻止更改或输入触发。

— 朗讯
source