HTML input for changing value

Question

I have an input tag. This tag does not disable the auto-complete function, so it is not necessary to release a key to change the value of this field and focus another. My question is: how can I detect ANY changes in the values ​​of this particular field, for example, e. g.

<input onvaluechange="//do following..." /> 

The JavaScript onchange does not fire when a value changes, only when changes such as blur, focus, etc.

EDIT: It is also not necessarily a key hit. Due to autocomplete, the user can simply click on the autocomplete result to change the value. This would not result in an onkeydown event.

Answer 1

This is also not necessarily a key push. Due to autocomplete

... and many other non-key operations, such as right-clicking / cutting / pasting, dragging, undoing / redo, spell check adjustments, etc.

HTML5 defines an oninput event to catch all direct changes.

Unfortunately, there is no browser support today (there is no support in IE, but there are errors in others), so all you can do if you really need to detect all changes to the input value before onchange is use setInterval to add poller, which is constantly compared with the previous value.

Answer 2

Detecting the "value" of an input text field after a keydown event in a text field?

Answer 3

I had a similar problem, and linking to a dozen different events just doesn't shorten it, since there are so many different ways to change the input value, as bobince noted.

So - I ended up writing a dead simple jQuery monitoring plugin that is generic. With it, you can track changes in input values, changes in the text of a text field, changes in the contents of a div, etc.:

https://github.com/nixd3v/monitor

Track changes to div content:

 $.monitor('add', function(){return $("div#someDiv").html()}, function(){ console.log('Div content changed'); }); 

Tracking input value changes:

 $.monitor('add', function(){return $("#password").val()}, function(){ console.log('input value changed'); }); 

It also uses a loop, however, not through setInterval , but through the use of setTimeout along with a spontaneous anonymous function:

 (function(){ // do some stuff setTimeout(arguments.callee, 100); })(); 

What this means is that it ensures that the next call will not be made before your code is executed. If you use polling in your code, this is the right way to do it.

Answer 4

You can use the onKeyPress attribute to track user changes.

For instance:

 <input type='input' onKeyPress='SomeScriptMethod();'>