Javascript <input type="number" /> 当它的值改变时会触发什么事件?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3940258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 06:44:30  来源:igfitidea点击:

What events does an <input type="number" /> fire when it's value is changed?

javascripthtml

提问by Ian Oxley

Just wondering whether anyone knows what events an HTML5 <input type="number" />element fires when its up / down arrows are clicked:

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

example number input

示例数字输入

I'm already using an onblurfor when the focus leaves the input field.

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

采纳答案by Jacob Relkin

changewould be the event that is fired when the field's value changes.

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

I think the HTML5 event inputwould also fire.

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

回答by Will Moore

I found that for jQuery the following code covered keyboard input, mousewheel changes and button clicks in Chrome, and also handled keyboard input in Firefox

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

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

回答by Niall King

I found that onkeyupand onchangecovered everything in Chrome 19. This handles direct value input, up down arrow keypress, clicking the buttons and scrolling the mousewheel.

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

onchangealone would be sufficient in Chrome, but other browsers that only render the field as a text box need the onkeyupbinding, which works perfectly to read the new value.

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

Binding the mousewheelevent separately was less successful. The event fired too early - before the field value was updated - and therefore always gave the field's previous value

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

回答by andho

The onchangeevent fires on blur but the oninputevent fires as you type. Maybe you might want to put a timer on the oninputevent and fire your onchangeevent when the user has stopped typing for a second?

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

回答by Lucent

There is a current bug in Edgepreventing change or input from firing when using the arrow keys in a number input.

当在数字输入中使用箭头键时,Edge 中有一个当前的错误会阻止更改或输入被触发。