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.