Live feedback on how many chars there are left in textbox

Question

I have a textarea element what i want to limit to, lets say, 100 chars. my current task is to give a visual feedback to the user. Starting with empty box it should be "100 chars left".

Now, i added a javascript function charsLeft() to the textarea's onChange but it works only 50% as intended. It only updates the div containing the number when i leave (focus) the textarea and not as i type. how do i go about to do that? So that my user can see, as they type, how many chars they have left in my textarea?

Answer 1

Try using the onKeyUp event.

Answer 2

Handling the keyup event should certainly be part of the solution. You should also consider the cut and paste events, and since text can also be dragged into a textarea you should try and handle that too, possibly using the mouseup event. You may also want some kind of polling to cover browsers such as Firefox 2 and Opera that don't support the cut and paste events.

Answer 3

If you are looking for a more elegant solution, Flapjax is your friend. See the relevant code sample.