jQuery textbox change event doesn't fire until textbox loses focus?

Question

I found that jQuery change event on a textbox doesn't fire until I click outside the textbox.

HTML:

<input type="text" id="textbox" />

JS:

$("#textbox").change(function() {alert("Change detected!");});

See demo on JSFiddle

My application requires the event to be fired on every character change in the textbox. I even tried using keyup instead...

$("#textbox").keyup(function() {alert("Keyup detected!");});

...but it's a known fact that the keyup event isn't fired on right-click-and-paste.

Any workaround? Is having both listeners going to cause any problems?

^^ This. You can have as many event handlers as you like. – Reinstate Monica Cellio Jun 26 '13 at 10:26 — Reinstate Monica Cellio, Jun 26 '13 at 10:26

Petah · Accepted Answer · 2013-06-26T10:47:37.903

310

Binding to both events is the typical way to do it. You can also bind to the paste event.

You can bind to multiple events like this:

$("#textbox").on('change keyup paste', function() {
    console.log('I am pretty sure the text box changed');
});

If you wanted to be pedantic about it, you should also bind to mouseup to cater for dragging text around, and add a lastValue variable to ensure that the text actually did change:

var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
    if ($(this).val() != lastValue) {
        lastValue = $(this).val();
        console.log('The text box really changed this time');
    }
});

And if you want to be super duper pedantic then you should use an interval timer to cater for auto fill, plugins, etc:

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('I am definitely sure the text box realy realy changed this time');
    }
}, 500);

edited Jun 26 '13 at 10:47

answered Jun 26 '13 at 10:29

Petah

45,477
28
157
213

11

Finally someone read the question and answered the whole thing! – Reinstate Monica Cellio Jun 26 '13 at 10:30
4

`.on('change keyup paste', function() {...}` actually fires multiple times! If I typed a character, and then clicked outside, 'change' and 'keyup' events are both fired, leading to the function being executed multiple times! If I right-click-pasted and then clicked outside, 'change' and 'paste' are both fired. Heck! On using Ctrl+V to paste and then clicking outside fires it thrice!! – SNag Jun 26 '13 at 10:44
1

@SNag yes, so likewise you should add a check using a `lastValue` variable to ensure it actually has changed. – Petah Jun 26 '13 at 10:44
1

+1. However, is binding to 'change' even necessary here? It's not clear to me what case that would handle that wouldn't already have been handled by the time it (change) fired. – Madbreaks Dec 09 '13 at 18:23
Just make sure to `clearInterval()` when your textbox loses focus, or you'll be eating up CPU cycles for no reason. You'll need to save the return value of `setInterval()` to do this. – Doin Jan 25 '15 at 09:48
@Doin autofill etc won't even focus the input, besides 2 checks per second will not have a noticable effect on a CPU. – Petah Jan 26 '15 at 20:53
@Petah, I think autofill only happens once, on page load, doesn't it? So a single check during or after onload should handle that. As for not having any noticeable effect - (a) maybe so typically, but it's good practice anyway, and (b) the OP only discusses a single textbox, but for all you know there are 1000's of them on his or her actual page. Or perhaps this code will be baked into a library. Not everyone has a fast CPU, either. IMHO it's *very* bad form to do things inefficiently just because "CPU's are fast enough to handle it". – Doin Jan 28 '15 at 16:54
@Doin and what if I use a plugin to fill in the form fields when I click a button in the toolbar? Or what if there is another piece JavaScript that is updating the inputs without firing events. The point is there are edge cases, and if you want to cater for them, that is how. – Petah Jan 29 '15 at 20:42
@Petah... yes, you're right, I hadn't thought of that. – Doin Jan 31 '15 at 08:57
1

The paste event is fired before the text is actually pasted – brettwhiteman Apr 14 '15 at 01:54
the above has an terrible issue. Suppose you click on texbox T and changed the value. The stuff works ok! But suppose my cursor is still on textbox T and i switch screen using (ALT + TAB), everything is screwed and keyup event is fired and all the stuff goes wrong. – Ankur Soni Dec 14 '16 at 07:32

score 88 · Answer 2 · edited Feb 02 '15 at 16:08

88

On modern browsers, you can use the input event:

DEMO

$("#textbox").on('input',function() {alert("Change detected!");});

edited Feb 02 '15 at 16:08

mikemaccana

110,530
99
389
494

answered Jun 26 '13 at 10:30

A. Wolff

74,033
9
94
155

1

Nice - I wasn't aware of that. Is it a HTML5 thing? – Reinstate Monica Cellio Jun 26 '13 at 10:31
4

I would've loved to accept this answer, but like you said, this is a solution for modern browsers. My web application is targetted at users still using IE8, and this doesn't work on IE8. :( What can I say.. :( – SNag Jun 26 '13 at 11:08
Does not fire if for example select all text and hit delete key – jjxtra Jan 20 '19 at 22:39

score 4 · Answer 3 · answered Jun 20 '14 at 17:00

4

$(this).bind('input propertychange', function() {
        //your code here
    });

This is works for typing, paste, right click mouse paste etc.

answered Jun 20 '14 at 17:00

Tony Dong

3,213
1
29
32

1

This seems like the best solution because it does not fire multiple events if you do something like hit the up arrow on a numeric field. – Justin Jan 24 '17 at 17:27
1

Simple and efficient solution – Abdulhameed Jan 09 '20 at 09:52

Milan · Answer 4 · 2016-06-15T10:26:35.403

4

if you write anything in your textbox, the event gets fired.
code as follows :

HTML:

<input type="text" id="textbox" />

JS:

<script type="text/javascript">
  $(function () {
      $("#textbox").bind('input', function() {
      alert("letter entered");
      });
   });
</script>

edited Jun 15 '16 at 10:26

answered Nov 20 '14 at 05:00

Milan

3,005
1
24
26

score 2 · Answer 5 · edited Dec 08 '16 at 23:43

2

Try this:

$("#textbox").bind('paste',function() {alert("Change detected!");});

See demo on JSFiddle.

edited Dec 08 '16 at 23:43

Stacked

6,892
7
57
73

answered Jun 26 '13 at 10:24

Dhaval Marthak

17,246
6
46
68

As the question is on paste it doesn't work. _event isn't fired on right-click-and-paste._ – Dhaval Marthak Jun 26 '13 at 10:26
And what has that got to do with the use of `bind()`? – Reinstate Monica Cellio Jun 26 '13 at 10:28
he told that he the keyup event is not fired when right click + paste on it, so `keyup` and `change()` has their own typical behaviour so id he wants to execute event then `paste` might be the option – Dhaval Marthak Jun 26 '13 at 10:30
Of course, but that still doesn't answer why the use of `bind` instead of `on`. – Reinstate Monica Cellio Jun 26 '13 at 10:31

Venkat.R · Answer 6 · 2013-06-26T10:32:45.127

0

Try the below Code:

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});

edited Jun 26 '13 at 10:32

answered Jun 26 '13 at 10:25

Venkat.R

7,420
5
42
63

How does that capture pasting with the mouse, as mentioned in the question? – Reinstate Monica Cellio Jun 26 '13 at 10:26
keypress is suitable since he said that `event to be fired on every character change in the textbox` – Venkat.R Jun 26 '13 at 10:28
If you'd read all the question you'd see he also said, `"...but it's a known fact that the keyup event isn't fired on right-click-and-paste."` – Reinstate Monica Cellio Jun 26 '13 at 10:28

score 0 · Answer 7 · answered Apr 26 '16 at 04:39

Reading your comments took me to a dirty fix. This is not a right way, I know, but can be a work around.

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});

jQuery textbox change event doesn't fire until textbox loses focus?

7 Answers7

Linked