How do I implement onchange of <input type="text"> with jQuery?

ID : 20324

viewed : 8

Tags : jqueryinputonchangejquery

Top 5 Answer for How do I implement onchange of <input type="text"> with jQuery?

vote vote

94

As @pimvdb said in his comment,

Note that change will only fire when the input element has lost focus. There is also the input event which fires whenever the textbox updates without it needing to lose focus. Unlike key events it also works for pasting/dragging text.

(See documentation.)

This is so useful, it is worth putting it in an answer. Currently (v1.8*?) there is no .input() convenience fn in jquery, so the way to do it is

$('input.myTextInput').on('input',function(e){  alert('Changed!') }); 
vote vote

85

You can use .change()

$('input[name=myInput]').change(function() { ... }); 

However, this event will only fire when the selector has lost focus, so you will need to click somewhere else to have this work.

If that's not quite right for you, you could use some of the other jQuery events like keyup, keydown or keypress - depending on the exact effect you want.

vote vote

71

I would suggest using the keyup event something like below:

$('elementName').keyup(function() {  alert("Key up detected"); }); 

There are a few ways of achieving the same result so I guess it's down to preference and depends on how you want it to work exactly.

Update: This only works for manual input not copy and paste.

For copy and paste I would recommend the following:

$('elementName').on('input',function(e){  // Code here }); 
vote vote

69

Here's the code I use:

$("#tbSearch").on('change keyup paste', function () {     ApplyFilter(); });  function ApplyFilter() {     var searchString = $("#tbSearch").val();     //  ... etc... }  <input type="text" id="tbSearch" name="tbSearch" /> 

This works quite nicely, particularly when paired up with a jqGrid control. You can just type into a textbox and immediately view the results in your jqGrid.

vote vote

53

There is one and only one reliable way to do this, and it is by pulling the value in an interval and comparing it to a cached value.

The reason why this is the only way is because there are multiple ways to change an input field using various inputs (keyboard, mouse, paste, browser history, voiceinput etc.) and you can never detect all of them using standard events in a cross-browser environment.

Luckily, thanks to the event infrastructure in jQuery, it’s quite easy to add your own inputchange event. I did so here:

$.event.special.inputchange = {     setup: function() {         var self = this, val;         $.data(this, 'timer', window.setInterval(function() {             val = self.value;             if ( $.data( self, 'cache') != val ) {                 $.data( self, 'cache', val );                 $( self ).trigger( 'inputchange' );             }         }, 20));     },     teardown: function() {         window.clearInterval( $.data(this, 'timer') );     },     add: function() {         $.data(this, 'cache', this.value);     } }; 

Use it like: $('input').on('inputchange', function() { console.log(this.value) });

There is a demo here: http://jsfiddle.net/LGAWY/

If you’re scared of multiple intervals, you can bind/unbind this event on focus/blur.

Top 3 video Explaining How do I implement onchange of <input type="text"> with jQuery?

Related QUESTION?