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.

General Grievance · Accepted Answer · 2025-04-02 13:41:16Z

17

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 on Elements to catch all direct changes.

When this answer was written, browser support wasn'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.

Now, however, this seems widely available. See caniuse for more details.

edited Apr 2 at 13:41

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered May 13, 2010 at 11:42

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ThatGuy · Accepted Answer · 2011-09-08 06:11:37Z

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.

edited Sep 8, 2011 at 6:11

answered Aug 7, 2011 at 20:08

ThatGuy

15.1k2 gold badges31 silver badges26 bronze badges

1 Comment

f.ardelian Over a year ago

This github project doesn't exist any more.

Gareth Rees · Accepted Answer · 2012-11-20 18:32:42Z

1

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

For example:

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

edited Nov 20, 2012 at 18:32

Gareth Rees

66.1k10 gold badges139 silver badges166 bronze badges

answered May 13, 2010 at 11:15

Tim

9391 gold badge7 silver badges13 bronze badges

1 Comment

f.ardelian Over a year ago

This still won't work with autocomplete or when the mouse is used to cut/paste text.

Collectives™ on Stack Overflow

HTML Input on change of value

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related