HTML Input on change of value

Question

I have an input tag. This tag does not have the autocomplete feature turned off, thus, one does not necessarily need to release a key to change the value of this field and focus another one. My question is: how can I detect ANY value changes of this particular field, like e. g.

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

The JavaScript attribute onchange does not fire on change of value, only on changes like blur, focus, etc...

EDIT: It also doesn't necessarily be a key press. Due to the autocompletion, the user can simply mouse-click the autocompletion result to change the value. This would not fire an onkeydown event.

Answer 1

It also doesn't necessarily be a key press. Due to the autocompletion

...and many other non-key-based operations, such as right-click-cut/paste, drag and drop, undo/redo, spellchecker adjustments and so on.

HTML5 defines an oninput event to catch all direct changes.

Unfortunately browser support today isn't there (no support in IE, and there are some bugs in others), so all you can do if you really need to detect all changes to an input value earlier than onchange is to use setInterval to add a poller that constantly compares against the previous value.

Answer 2

I had a similar problem and binding to a dozen of different events just doesn't cut it, since there are so many different ways of changing input value, as bobince noted.

So - I ended up writing dead simple jQuery monitoring plugin that's generic in nature. With it you can monitor input value changes, textarea text changes, div content changes, etc:

https://github.com/nixd3v/monitor

Tracking div content changes:

$.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 of course, however, not through setInterval, but rather through using setTimeout along with a self-executing anonymous function:

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

What this does - this guarantees, that the next call is not made before your code was executed. If you use polling in your code - this is the right way of doing it.

Answer 3

You can use the onKeyPress attribute to monitor changes typed in by the user.

For example:

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

Answer 4

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