输入元素上的 Javascript 更改事件仅在失去焦点时触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7105997/
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
Javascript change event on input element fires on only losing focus
提问by Sachin Midha
I have an input element and I want to keep checking the length of the contents and whenever the length becomes equal to a particular size, I want to enable the submit button, but I am facing a problem with the onchange event of Javascript as the event fires only when the input element goes out of scope and not when the contents change.
我有一个输入元素，我想继续检查内容的长度，每当长度等于特定大小时，我想启用提交按钮，但我面临着 Javascript 的 onchange 事件作为事件的问题仅在输入元素超出范围时触发，而不是在内容更改时触发。
<input type="text" id="name" onchange="checkLength(this.value)" />
----onchange does not fire on changing contents of name, but only fires when name goes out of focus.
----onchange 不会在更改 name 的内容时触发，但仅在 name 失去焦点时触发。
Is there something I can do to make this event work on content change? or some other event I can use for this? I found a workaround by using the onkeyup function, but that does not fire when we select some content from the auto completer of the browser.
有什么我可以做的事情来使这个事件在内容更改上起作用吗？或者我可以使用的其他一些事件？我通过使用 onkeyup 函数找到了一种解决方法，但是当我们从浏览器的自动完成器中选择一些内容时，它不会触发。
I want something which can work when the content of the field change whether by keyboard or by mouse... any ideas?
我想要一些可以在字段内容通过键盘或鼠标更改时可以工作的东西......有什么想法吗？
回答by katspaugh
(function () {
var oldVal;
$('#name').on('change textInput input', function () {
var val = this.value;
if (val !== oldVal) {
oldVal = val;
checkLength(val);
}
});
}());
This will catch change, keystrokes, paste, textInput, input(when available). And not fire more than necessary.
这将捕获change、击键、paste、textInput、input（如果可用）。并且不要超过必要的火。
http://jsfiddle.net/katspaugh/xqeDj/
http://jsfiddle.net/katspaugh/xqeDj/
References:
参考：
textInput— a W3C DOM Level 3 event type. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents
textInput— W3C DOM Level 3 事件类型。http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents
A user agent must dispatch this event when one or more characters have been entered. These characters may originate from a variety of sources, e.g., characters resulting from a key being pressed or released on a keyboard device, from the processing of an input method editor, or resulting from a voice command. Where a “paste” operation generates a simple sequence of characters, i.e., a text passage without any structure or style information, this event type should be generated as well.
当输入一个或多个字符时，用户代理必须调度此事件。这些字符可能源自多种来源，例如，由键盘设备上的按键按下或释放产生的字符、来自输入法编辑器的处理或由语音命令产生的字符。如果“粘贴”操作生成简单的字符序列，即没有任何结构或样式信息的文本段落，则也应生成此事件类型。
input— an HTML5event type.
input— HTML5事件类型。
Fired at controls when the user changes the value
当用户更改值时在控件上触发
Firefox, Chrome, IE9and other modern browsers support it.
Firefox、Chrome、IE9和其他现代浏览器都支持它。
This event occurs immediately after modification, unlike the onchange event, which occurs when the element loses focus.
此事件在修改后立即发生，与 onchange 事件不同，后者在元素失去焦点时发生。
回答by SSZero
As an extention to katspaugh's answer, here's a way to do it for multiple elements using a css class.
作为 katspaugh 答案的扩展，这里有一种使用 css 类为多个元素执行此操作的方法。
$('.myclass').each(function(){
$(this).attr('oldval',$(this).val());
});
$('.myclass').on('change keypress paste focus textInput input',function(){
var val = $(this).val();
if(val != $(this).attr('oldval') ){
$(this).attr('oldval',val);
checkLength($(this).val());
}
});
回答by franmcod
It took me 30 minutes to find it, but this is working in June 2019.
我花了 30 分钟才找到它，但这在 2019 年 6 月有效。
<input type="text" id="myInput" oninput="myFunction()">
and if you want to add an event listener programmatically in js
如果你想在 js 中以编程方式添加一个事件监听器
inputElement.addEventListener("input", event => {})
回答by powtac
<input type="text" id="name" name="name"/>
$('#name').keyup(function() {
alert('Content length has changed to: '+$(this).val().length);
});
回答by Dogbert
You can use onkeyup
您可以使用 onkeyup
<input id="name" onkeyup="checkLength(this.value)" />
回答by DaveRandom
You would have to use a combination of onkeyupand onclick(or onmouseup) if you want to catch every possibility.
如果你想抓住每一种可能性，你就必须使用onkeyup和onclick（或onmouseup）的组合。
<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />
回答by efirat
Here is another solution I develop for the same problem. However I use many input boxes so I keep old value as an user-defined attribute of the elements itself: "data-value". Using jQuery it is so easy to manage.
这是我为同一问题开发的另一个解决方案。但是，我使用了许多输入框，因此我将旧值保留为元素本身的用户定义属性：“数据值”。使用jQuery，管理起来非常容易。
$(document).delegate('.filterBox', 'keyup', { self: this }, function (e) {
var self = e.data.self;
if (e.keyCode == 13) {
e.preventDefault();
$(this).attr('data-value', $(this).val());
self.filterBy(this, true)
}
else if (e.keyCode == 27) {
$(this).val('');
$(this).attr('data-value', '');
self.filterBy(this, true)
}
else {
if ($(this).attr('data-value') != $(this).val()) {
$(this).attr('data-value', $(this).val());
self.filterBy(this);
}
}
});
here is, I used 5-6 input boxes have class 'filterBox', I make filterBy method run only if data-value is different than its own value.
在这里，我使用了 5-6 个输入框，它们具有类“filterBox”，我让 filterBy 方法仅在 data-value 与其自身值不同时才运行。
