输入元素上的 Javascript 更改事件只在失去焦点时触发

我有一个 input 元素，我想要不断检查内容的长度，当长度变得等于特定大小时，我想要启用提交按钮，但是我面临着 Javascript 的 onchange 事件的问题，因为事件只在 input 元素超出作用域时触发，而不是在内容变化时触发。

<input type="text" id="name" onchange="checkLength(this.value)" />

—— onchange 不会触发名称内容的更改，而只是在名称失去焦点时触发。

有什么我可以做的事情，使这个事件的工作内容的变化？或者其他什么我可以利用的活动？ 我通过使用 onkeyup 函数找到了一个变通方法，但是当我们从浏览器的自动完成程序中选择一些内容时，这个变通方法不会触发。

我想要的东西，可以工作时，字段的内容改变，无论是通过键盘或鼠标... 有什么想法？

91591 次浏览
小开

Do it the jQuery way:

<input type="text" id="name" name="name"/>




$('#name').keyup(function() {
alert('Content length has changed to: '+$(this).val().length);
});
小开

You can use onkeyup

<input id="name" onkeyup="checkLength(this.value)" />
小开

You would have to use a combination of onkeyup and onclick (or onmouseup) if you want to catch every possibility.

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />
小开
最佳答案 
(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.

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

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 HTML5 event type.

Fired at controls when the user changes the value

Firefox, Chrome, IE9 and other modern browsers support it.

This event occurs immediately after modification, unlike the onchange event, which occurs when the element loses focus.

小开

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.

        $(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.

小开

As an extention to katspaugh's answer, here's a way to do it for multiple elements using a css class.

   $('.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());
}
});
小开

It took me 30 minutes to find it, but this is working in June 2019.

<input type="text" id="myInput" oninput="myFunction()">

and if you want to add an event listener programmatically in js

inputElement.addEventListener("input", event => {})

提交答案