根据我的经验，input type="text" onchange事件通常只有在您离开 ( blur) 控件后才会发生。
有没有办法强制浏览器在onchange每次textfield内容更改时触发？如果不是，那么“手动”跟踪这种最优雅的方式是什么？
使用onkey*事件并不可靠，因为您可以右键单击该字段并选择粘贴，这将在没有任何键盘输入的情况下更改该字段。
是setTimeout唯一的方法吗？...丑:-)
在 input type="text" 中按您输入的方式跟踪 onchange 的最佳方法？
IT技术
javascript
html
forms
2021-02-01 02:14:50
6个回答
这几天听听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>更新：
请参阅另一个答案（2015 年）。
2009 年的原始答案：
那么，您希望onchange事件在按键、模糊和粘贴时触发吗？那是魔法。
如果您想在键入时跟踪更改，请使用"onkeydown". 如果您需要使用鼠标捕获粘贴操作，请使用"onpaste"( IE , FF3 ) 和"oninput"( FF, Opera, Chrome, Safari 1 )。
1断为<textarea>在Safari。使用textInput替代
下面的代码对我来说很好用 Jquery 1.8.3
HTML : <input type="text" id="myId" />
Javascript/JQuery：
$("#myId").on('change keydown paste input', function(){
doSomething();
});
Javascript 在这里是不可预测和有趣的。
onchange仅在您模糊文本框时发生onkeyup&onkeypress并不总是发生在文本更改时onkeydown在文本更改时发生（但无法通过鼠标单击跟踪剪切和粘贴）onpaste&oncut发生在按键甚至鼠标右键单击时。
因此，要跟踪文本框的变化，我们需要onkeydown,oncut和onpaste。在这些事件的回调中，如果您检查文本框的值，那么您将不会获得更新的值，因为该值在回调后发生了变化。因此，对此的解决方案是设置一个超时函数，超时为 50 毫秒（或可能更少）以跟踪更改。
这是一个肮脏的黑客，但这是我研究过的唯一方法。
这是一个例子。 http://jsfiddle.net/2BfGC/12/
我认为在 2018 年最好使用该input事件。
——
正如 WHATWG 规范所描述的（https://html.spec.whatwg.org/multipage/indices.html#event-input-input）：
当用户更改值时在控件上触发（另请参阅更改事件）
——
以下是如何使用它的示例：
<input type="text" oninput="handleValueChange()">