根据我的经验，input type="text"onchange 事件通常仅在您离开 (blur) 控件后发生。
有没有办法强制浏览器在每次textfield 内容更改时触发onchange？如果不是，那么“手动”跟踪这个最优雅的方法是什么？
使用onkey* 事件并不可靠，因为您可以右键单击该字段并选择“粘贴”，这将更改该字段而无需任何键盘输入。
setTimeout 是唯一的方法吗？.. 丑 :-)
【问题讨论】：
标签： javascript html forms
这些天来听oninput。感觉就像onchange，无需失去对元素的关注。它是 HTML5。
除 IE8 及以下版本外，所有人（甚至是移动设备）都支持它。对于 IE 添加onpropertychange。我是这样使用的：
const source = document.getElementById('source');
const result = document.getElementById('result');
const inputHandler = function(e) {
result.innerHTML = e.target.value;
}
source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); <input id="source">
<div id="result"></div>【讨论】：
oninput，虽然只是部分支持 (caniuse.com/#feat=input-event)。
innerText 代替innerHTML 可能是值得的，这样任何标记都不会呈现
更新：
请参阅Another answer (2015)。
2009 年原始答案：
那么，您希望onchange 事件在 keydown、blur、 和 粘贴时触发？这太神奇了。
如果您想在输入时跟踪更改，请使用"onkeydown"。如果需要用鼠标捕获粘贴操作，请使用"onpaste"（IE、FF3）和"oninput"（FF, Opera, Chrome, Safari1）。
1在 Safari 上因<textarea> 而损坏。请改用textInput
【讨论】：
onkeypress 而不是 onkeydown。 onkeydown 在按下某个键时触发。如果用户按住某个键，则该事件只会针对第一个字符触发一次。 onkeypress 在向文本字段添加字符时触发。
onchange 触发所有这些操作并不是很神奇。 <input onchange="doSomething();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"> 对大多数人来说已经足够好了。
$().on('change keydown paste input', function() {})
以下代码适用于我的 Jquery 1.8.3
HTML：<input type="text" id="myId" />
Javascript/JQuery：
$("#myId").on('change keydown paste input', function(){
doSomething();
});
【讨论】：
keydown，因为它会复制输入的值，删除它。
Javascript 在这里是不可预测且有趣的。
onchange 仅在您模糊文本框时出现onkeyup & onkeypress 并不总是在文本更改时出现onkeydown 发生在文本更改时（但无法通过鼠标单击跟踪剪切和粘贴）onpaste & oncut 发生在按键甚至鼠标右键单击时。所以，要跟踪文本框中的变化，我们需要onkeydown、oncut 和onpaste。在这些事件的回调中，如果您检查文本框的值，那么您不会获得更新的值，因为回调后值已更改。所以解决这个问题的方法是设置一个超时函数，超时时间为 50 毫秒（或者可能更短）来跟踪变化。
这是一个肮脏的黑客，但这是我研究过的唯一方法。
这是一个例子。 http://jsfiddle.net/2BfGC/12/
【讨论】：
oninput 和 textInput 是事件的实际解决方案，但并非所有浏览器都支持。
onkeyup 和 onkeydown，它们是相似的。两者都可以捕获 Ctrl、Alt、Shift 和 Meta 键。对于第三个要点，我假设您的意思是 onkeypress。
我认为在 2018 年最好使用 input 事件。
-
正如 WHATWG 规范所描述的 (https://html.spec.whatwg.org/multipage/indices.html#event-input-input)：
当用户更改值时在控件上触发（另请参阅 change event)
-
这是一个如何使用它的示例：
<input type="text" oninput="handleValueChange()">
【讨论】：
onkeyup 发生在您键入之后，例如，当我抬起手指时按 t，动作发生，但在 keydown 上，动作发生在我输入字符 t 之前发生
希望这对某人有所帮助。
所以onkeyup 更适合您想发送刚刚输入的内容。
【讨论】：
我有类似的要求（twitter 风格的文本字段）。使用onkeyup 和onchange。 onchange 实际上在失去焦点期间负责鼠标粘贴操作。
[更新]在 HTML5 或更高版本中，使用oninput 获取实时字符修改更新，如上面其他答案中所述。
【讨论】：
oninput 是要走的路。但是，当我实施时，HTML5 不存在，我们有 IE 8 :(。感谢您的更新，因为它为用户提供了最新信息。
请判断下一个使用 JQuery 的方法：
HTML：
<input type="text" id="inputId" />
Javascript(JQuery)：
$("#inputId").keyup(function() {
$(this).blur();
$(this).focus();
});
$("#inputId").change(function() {
// Do whatever you need to do on actual change of the value of the input field
});
【讨论】：
如果你只使用 Internet Explorer，你可以使用这个：
<input type="text" id="myID" onpropertychange="TextChange(this)" />
<script type="text/javascript">
function TextChange(tBox) {
if(event.propertyName=='value') {
//your code here
}
}
</script>
希望对您有所帮助。
【讨论】：
有一个非常接近的解决方案（不要修复所有粘贴方式），但其中大部分：
它适用于输入以及文本区域：
<input type="text" ... >
<textarea ... >...</textarea>
这样做：
<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>
正如我所说，并不是所有的粘贴方式都可以在所有浏览器上触发一个事件……最糟糕的是，有些根本不会触发任何事件，但计时器用于这种情况太可怕了。
但大多数粘贴方式都是通过键盘和/或鼠标完成的，因此通常在粘贴后会触发 onkeyup 或 onmouseup，在键盘上键入时也会触发 onkeyup。
确保您的检查代码不会花费太多时间...否则用户的印象会很差。
是的，诀窍是在键和鼠标上开火......但要注意两者都可以开火，所以要记住这样！！！
【讨论】：
“输入”对我有用。
var searchBar = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);
【讨论】：
要跟踪每个尝试这个例子，在此之前将光标闪烁率完全降低到零。
<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>
</body>onblur : 退出时生成事件
onchange : 如果输入文本发生任何更改，则在退出时生成事件
onkeydown：在任何按键按下时都会产生事件（对于长时间按住按键也是如此）
onkeyup : 任何按键释放都会产生事件
onkeypress：与 onkeydown（或 onkeyup）相同，但不会对 ctrl、backsace、alt 其他做出反应
【讨论】：
2018 在这里，这就是我的工作：
$(inputs).on('change keydown paste input propertychange click keyup blur',handler);
如果您能指出这种方法的缺陷，我将不胜感激。
【讨论】：
使用oninput 代替onchange。
index.html
<html>
<head>
<title>title here</title>
<script src="index.js"></script>
</head>
<body>
<input oninput="onclickhandler(this)"></input>
</body>
</html>
script.js
function onclickhandler(e) {
console.log(e.value);
}
【讨论】：
您也可以使用keydown、keyup 和keypress 事件。
【讨论】：
方法一：为input添加事件监听器：
element.addEventListener("input", myFunction);
方法二：用JavaScript定义oninput属性：
element.oninput = function()
{
myFunction();
};
方法3：用HTML定义oninput属性：
<input type="text" oninput="myFunction();">
【讨论】：