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: http://stackoverflow.com/questions/1481152/jquery-how-to-detect-a-textboxs-content-has-changed — Bashwork, May 26 '11 at 14:13
Are you using $('input').change(function(){ do something }); ? — msmafra, May 26 '11 at 14:20
Yes I was using .change and .keyup, but they are not sufficient, please see my answer below... — jcvandan, May 26 '11 at 14:29
See [$("#some-input").changePolling()](https://gist.github.com/2944926); for a wrapper that checks the current value and triggers `.change()` if it has changed. — Joel Purra, Jul 25 '12 at 03:03

score 29 · Answer 1 · answered May 26 '11 at 14:31

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 '11 at 14:31

MikeM

27,227
4
64
80

1

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 – jcvandan May 26 '11 at 14:33
1

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?](http://stackoverflow.com/questions/441631/how-to-detect-right-mouse-click-paste-using-javascript)...heres the [updated fiddle](http://jsfiddle.net/pxfunc/zJ7Lf/1/) – MikeM May 26 '11 at 14:38
potentially useful but can't use them really if they don't have very wide support! – jcvandan May 26 '11 at 14:40
actually, `input` seems to be the one-stop shop at least in IE9/FF/Chrome – MikeM May 26 '11 at 14:42
1

updated fiddle: http://jsfiddle.net/zJ7Lf/288/ illustrating the issue with capturing programmatically triggered changes – Jonathan Dec 05 '12 at 02:09

score 23 · Answer 2 · edited Nov 26 '14 at 18:13

23

I have found that this works:

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

})

edited Nov 26 '14 at 18:13

Charlie

8,530
2
55
53

answered Nov 05 '12 at 21:09

Pow-Ian

3,607
1
22
31

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. – Pow-Ian Jul 02 '13 at 17:45

score 14 · Answer 3 · answered May 26 '11 at 14:15

14

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

answered May 26 '11 at 14:15

ventaur

1,821
11
24

3

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. – ventaur May 26 '11 at 14:21

score 4 · Accepted Answer · answered May 26 '11 at 14:23

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...

Zaheer Ahmed · Answer 5 · 2012-12-06T11:30:05.020

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 06 '12 at 11:30

answered Dec 06 '12 at 08:09

Zaheer Ahmed

28,160
11
74
110

Check demo, its handling copy-paste too – Zaheer Ahmed Jan 17 '14 at 12:08
Yeah it doesn't handle right-click pasting and then tabbing out – PandaWood Oct 22 '14 at 22:58
@PandaWood its perfectly working for your scenario. `change()` the second textbox will handle it as written in answer. – Zaheer Ahmed Oct 23 '14 at 05:07
@ZaheerAhmed yes. your adding of 'change' fixes that scenario – PandaWood Oct 23 '14 at 05:55
1

@ZaheerAhmed Oh, I see – PandaWood Oct 23 '14 at 14:06
@ZaheerAhmed Actually, perhaps what I meant was, I go to the DEMO link, paste in via right-click, tab-key off and the event doesn't throw - I don't get the message box for that on the DEMO – PandaWood Oct 26 '14 at 05:56

score 1 · Answer 6 · edited Feb 13 '17 at 23:31

1

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

works for me.

edited Feb 13 '17 at 23:31

Baum mit Augen

49,044
25
144
182

answered Feb 13 '17 at 23:26

Yaseer Arafat

81
1
4

jQuery textbox change event

6 Answers6

Linked