JavaScript change event in input element only fires when focus is lost

Question

I have an input element and I want to continue checking the length of the content, and when the length becomes equal to a certain size, I want to enable the submit button, but I encounter a problem with the onchange Javascript event as an event fires only when the input element goes beyond Visibility, not when changing content.

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

---- onchange does not work when the contents of the name change, but only when the name is out of focus.

What can I do to make this event work on changing content? or some other event that I can use for this? I found a workaround using the onkeyup function, but it does not work when we select some content from the browser autocomplete.

I want something that can work when the contents of a field are changed using the keyboard or mouse ... any ideas?

Answer 1

 (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 (if available). And do not fire more than necessary.

http://jsfiddle.net/katspaugh/xqeDj/

---

Literature:

textInput - type of event W3C DOM Level 3. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

The user agent should send this event when one or more characters have been entered. These characters can come from various sources, for example characters that are the result of a keystroke or released on a keyboard device, from processing the input method of an editor, or as a result of a voice command. Where the insert operation generates a simple sequence of characters, i.e. text passage without any information about the structure or style, this type of event should also be generated.

input is an HTML5 event type.

Dismissal in control 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 an element loses focus.

Answer 2

As an extension for katspaugh's answer, here is a way to do this for multiple elements using the 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()); } }); 

Answer 3

Do it in a jQuery way:

 <input type="text" id="name" name="name"/> $('#name').keyup(function() { alert('Content length has changed to: '+$(this).val().length); }); 

Answer 4

It took me 30 minutes to find it, but it works 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 => {}) 

Answer 5

You can use onkeyup

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

Answer 6

You will need to use a combination of onkeyup and onclick (or onmouseup ) if you want to catch any opportunity.

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

Answer 7

Here is another solution that I am developing for the same problem. However, I use many input fields, so I save the old value as a user-defined attribute of the elements themselves: "data-value". Using jQuery 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, I used 5-6 input boxes have the filterBox class, I only run the filterBy method if the data value is different from its own value.