Why does jQuery.change() only trigger when I leave the element?

Question

I have a textarea element and I want to print the number of characters written, above the textarea, as I'm typing. The HTML looks like this:

<p id="counter"></p>
<textarea id="text"></textarea>

and the javascript:

jQuery( "#text" ).change( function(){
    var numberOfChars = jQuery( "#text" ).val().length;
    jQuery( "#counter" ).html( numberOfChars );
});

But the counter only "updates" when I click outside the textarea. Why is that? I want the counter to update on the fly as I'm writing.

Just to note where this behaviour is specified: *The change event occurs when a control loses the input focus and its value has been modified since gaining focus* [w3.org](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) — lonesomeday, Mar 05 '12 at 14:03

score 11 · Accepted Answer · edited Mar 05 '12 at 17:40

11

this is known behaviour of the change event. It does not fire until the element has lost focus. From the docs:

The change event is sent to an element when its value changes. This event is limited to elements, boxes and elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

I would bind the script to the keyup instead (you could use the other key events, but up makes the most sense in this context):

jQuery( "#text" ).keyup(function(){
    var numberOfChars = jQuery( "#text" ).val().length;
    jQuery( "#counter" ).html( numberOfChars );
});

edited Mar 05 '12 at 17:40

lonesomeday

233,373
50
316
318

answered Mar 05 '12 at 13:58

Mild Fuzz

29,463
31
100
148

1

Well.. That was easy. Thanks! But do you have any idea why jQuery.change() behaved like onblur instead of onchange? – Weblurk Mar 05 '12 at 14:00
It is expected behaviour. I have edited my answer to be more complete – Mild Fuzz Mar 05 '12 at 14:04
@MildFuzz Please avoid using link-shortening services: there's no need to do it, so all it serves to do is to obfuscate where the link points. – lonesomeday Mar 05 '12 at 17:41
keyup doesn't trigger if the user uses the mouse to paste in some info – Peheje Oct 19 '18 at 08:08

score 3 · Answer 2 · answered Jul 29 '19 at 08:15

3

$('input#myId').bind('input', function() {
  //some code
});

It allows to detect keyup event, paste data with the mouse...

answered Jul 29 '19 at 08:15

Elie Destremau

131
1
4

score 2 · Answer 3 · answered Mar 05 '12 at 13:58

2

Try using the keyup event instead of change. See it in action: http://jsfiddle.net/ren4A/1/

answered Mar 05 '12 at 13:58

T. Junghans

11,385
7
52
75

score 1 · Answer 4 · answered Mar 05 '12 at 13:58

1

try .on('keyup') or .on('keypress') or .on('keydown')

answered Mar 05 '12 at 13:58

Alexander Corwin

1,097
6
11

Why does jQuery.change() only trigger when I leave the element?

4 Answers4

Linked