JQuery: detect change in input field

jquery keypress
CL22 picture CL22 · Oct 9, 2012 · Viewed 414.4k times · Source

I want to detect when a user's keyboard actions alter the value of a text field. It should work consistently across modern browsers.

The JQuery page for the .keypress event says it's not consistent? Also, it doesn't work for backspace, delete etc.

I can't use .keydown as it is because it reacts to shift, alt and arrow keys etc. Also, it doesn't fire more than once when the user holds down a key and multiple characters are inserted.

Is there a concise method I'm missing? Or should I use .keydown and filter out events that are triggered by arrow keys, shift and so on? My main concern is there will be keys that I'm not aware should be filtered. (I nearly forgot about alt and ctrl, I suppose there could be others) But then how would I detect the key being held down and inserting multiple characters?

As a bonus it would detect changes due to pasting (including right-clicking) but I have the solution to that from here.

Answer

Timm picture Timm · Oct 9, 2012

You can bind the 'input' event to the textbox. This would fire every time the input changes, so when you paste something (even with right click), delete and type anything.

$('#myTextbox').on('input', function() {
    // do something
});

If you use the change handler, this will only fire after the user deselects the input box, which may not be what you want.

There is an example of both here: http://jsfiddle.net/6bSX6/

Related questions

jQuery Event Keypress: Which key was pressed?

With jQuery, how do I find out which key was pressed when I bind to the keypress event? $('#searchbox input').bind('keypress', function(e) {}); I want to trigger a submit when ENTER is pressed. [Update] Even though I found …

Read More
How to detect a textbox's content has changed

I want to detect whenever a textbox's content has changed. I can use the keyup method, but that will also detect keystrokes which do not generate letters, like the arrow keys. I thought of two methods of doing this using …

Read More
Definitive way to trigger keypress events with jQuery

I've read all the answers on to this questions and none of the solutions seem to work. Also, I am getting the vibe that triggering keypress with special characters does not work at all. Can someone verify who has done …

Read More