7

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.

4 Answers 4

16

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.

0
3

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

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.

2
  • My respect ;) At the moment, however, I do not have access to a computer I could test it on :(
    – arik
    Aug 7, 2011 at 20:57
  • 2
    This github project doesn't exist any more.
    – f.ardelian
    Nov 20, 2012 at 18:30
1

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

For example:

<input type='input' onKeyPress='SomeScriptMethod();'>
1
  • This still won't work with autocomplete or when the mouse is used to cut/paste text.
    – f.ardelian
    Nov 20, 2012 at 18:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.