jQuery textbox change event

Question

Does text input element not have a change event? When I attach a change event handler to a text input it is not being fired. Keyup is fired, but keyup is not sufficient for detecting a change as there are obviously other ways of entering text into an input.

Maybe this will help: stackoverflow.com/questions/1481152/… — Bashwork
– Bashwork, Commented May 26, 2011 at 14:13
Are you using $('input').change(function(){ do something }); ? — msmafra
– msmafra, Commented May 26, 2011 at 14:20
Yes I was using .change and .keyup, but they are not sufficient, please see my answer below... — jcvandan
– jcvandan, Commented May 26, 2011 at 14:29
See $("#some-input").changePolling(); for a wrapper that checks the current value and triggers .change() if it has changed. — Joel Purra
– Joel Purra, Commented Jul 25, 2012 at 3:03

MikeM · Accepted Answer · 2011-05-26 14:31:01Z

29

The HTML4 spec for the <input> element specifies the following script events are available:

onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

here's an example that bind's to all these events and shows what's going on http://jsfiddle.net/pxfunc/zJ7Lf/

I think you can filter out which events are truly relevent to your situation and detect what the text value was before and after the event to determine a change

answered May 26, 2011 at 14:31

MikeM

27.5k4 gold badges67 silver badges80 bronze badges

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

5 Comments

jcvandan Over a year ago

I thought of using change, focus, blur, keyup and mouseup all together - however mouseup only fires if the mouse is over the texbox, this means it doesn't pick up a user pasting from a context menu where paste is likely to be outside the scope of the text input

MikeM Over a year ago

looks like newer browsers support paste and input events, I added those after finding them here, jquery - How to detect right mouse click + paste using JavaScript?...heres the updated fiddle

jcvandan Over a year ago

potentially useful but can't use them really if they don't have very wide support!

MikeM Over a year ago

actually, input seems to be the one-stop shop at least in IE9/FF/Chrome

Jonathan Over a year ago

updated fiddle: jsfiddle.net/zJ7Lf/288 illustrating the issue with capturing programmatically triggered changes

Charlie · Accepted Answer · 2014-11-26 18:13:33Z

23

I have found that this works:

$(document).ready(function(){
    $('textarea').bind('input propertychange', function() {
        //do your update here
    }

})

edited Nov 26, 2014 at 18:13

Charlie

9,2132 gold badges61 silver badges56 bronze badges

answered Nov 5, 2012 at 21:09

Pow-Ian

3,6351 gold badge25 silver badges32 bronze badges

1 Comment

Pow-Ian Over a year ago

I use it extensively to validate inline with ajax. I think the new mutation events being discussed will replace some of this functionality but this solution has been tested in Firefox, Chrome, IE 10 and Safari and is known to be working.

ventaur · Accepted Answer · 2011-05-26 14:15:44Z

14

The change event only fires after the input loses focus (and was changed).

answered May 26, 2011 at 14:15

ventaur

1,85111 silver badges24 bronze badges

1 Comment

ventaur Over a year ago

If you REALLY want to know when any text changes, pretty much as it changes, you're stuck polling the input. That is, use setInterval with a function that compares the current value of the input to a previously stored value (via some variable with higher scope than the function). If the two values do not match, a change occurred. Then, store the current value into that other variable for the next check.

jcvandan · Accepted Answer · 2011-05-26 14:23:39Z

4

There is no real solution to this - even in the links to other questions given above. In the end I have decided to use setTimeout and call a method that checks every second! Not an ideal solution, but a solution that works and code I am calling is simple enough to not have an effect on performance by being called all the time.

function InitPageControls() {
        CheckIfChanged();
    }

    function CheckIfChanged() {
        // do logic

        setTimeout(function () {
            CheckIfChanged();
        }, 1000);
    }

Hope this helps someone in the future as it seems there is no surefire way of acheiving this using event handlers...

answered May 26, 2011 at 14:23

jcvandan

14.4k19 gold badges69 silver badges106 bronze badges

Comments

Zaheer Ahmed · Accepted Answer · 2012-12-06 11:30:05Z

3

You can achieve it:

 $(document).ready(function(){              
     $('#textBox').keyup(function () {alert('changed');});
 });

or with change (handle copy paste with right click):

 $(document).ready(function(){              
     $('#textBox2').change(function () {alert('changed');});
 });

Here is Demo

edited Dec 6, 2012 at 11:30

answered Dec 6, 2012 at 8:09

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

6 Comments

Zaheer Ahmed Over a year ago

Check demo, its handling copy-paste too

PandaWood Over a year ago

Yeah it doesn't handle right-click pasting and then tabbing out

Zaheer Ahmed Over a year ago

@PandaWood its perfectly working for your scenario. change() the second textbox will handle it as written in answer.

PandaWood Over a year ago

@ZaheerAhmed yes. your adding of 'change' fixes that scenario

PandaWood Over a year ago

@ZaheerAhmed Oh, I see

|

Baum mit Augen · Accepted Answer · 2017-02-13 23:31:16Z

1

$('#input').on("input",function () {alert('changed');});

works for me.

edited Feb 13, 2017 at 23:31

Baum mit Augen♦

50.4k25 gold badges153 silver badges187 bronze badges

answered Feb 13, 2017 at 23:26

Yaseer Arafat

811 silver badge4 bronze badges

Collectives™ on Stack Overflow

jQuery textbox change event

6 Answers 6

5 Comments

1 Comment

1 Comment

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

1 Comment

1 Comment

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related