对于文本输入控件中的任何文本更改，正确的 javascript 事件是什么？答案

【问题标题】：What is the correct javascript event for any text change in a text input control?对于文本输入控件中的任何文本更改，正确的 javascript 事件是什么？
【发布时间】：2012-05-05 19:39:19
【问题描述】：

每当输入控件中的文本发生更改时，我都需要立即更新一些内容。但我似乎无法为此找到正确的事件。

onchange 仅在您离开输入框时触发（即离开标签或点击外部）。
onkeypress 触发 before 进行更改，并在 any 按键时触发（例如，光标向左和向右也不会导致任何文本更改)
onkeydown 和 onkeyup 也会在 any 键上触发（甚至像 Shift 等，不会导致任何文本更改）

此外，当使用鼠标右键单击 + 从剪贴板粘贴时，这些似乎都不会触发。或者从 JS 中更改值时（即从其他地方执行 input.value = something）。

最小示例：http://jsfiddle.net/nggAm/

我该怎么办？我想我可能会解决这个问题的一种方法（嗯，主要是）是将所有事件设置为一个通用事件处理程序，在那里缓存值，并且只在字符串更改时才进行实际更新。但这感觉有点糟糕。这样做的正确方法是什么？

【问题讨论】：

很遗憾，mutation events 既不跨浏览器也不推荐使用。

标签： javascript events text input onchange

【解决方案1】：

对于旧版浏览器，您确实需要设置输入的 onkeyup 和 onchange 和 onpaste。

但较新的浏览器具有 oninput，这是您希望每个浏览器都具有的。

您可以设置所有事件，然后在 oninput 触发时移除除 oninput 之外的所有事件。

（但如果您在退格或删除字符，IE9 会出现传递输入事件的问题，因此请将按键事件留给该浏览器。）

示例代码将所有事件定向到一个处理程序，如果 oninput 触发则删除

F.text1.oninput= function(){
    F.text1.onpaste= F.text1.onchange= null;
    if(!document.documentMode) F.text1.onkeyup= null;
    F.text1.oninput= F.limiter;
    return F.limiter();
}
F.text1.onpaste= function(){
    setTimeout(F.limiter, 100);
}
F.text1.onkeyup= F.text1.onchange= F.limiter;

【讨论】：