javascript - Show in real time the number of characters in a HTML textarea while the user types - Stack Overflow

admin管理员组

文章数量:1328616

I am trying to create a blog ment form with a textarea and a span which shows to the user the number of remaining characters that can be introduced in the text area.

So I have this form:

<form action="ment.php" method="POST" accept-charset="utf-8">
    <textarea name="ment" id="ment" rows="4" cols="56"></textarea>

    <input type="submit" value="Post" />
    <span id="ment-chars-left">512</span> characters left
</form>

And then I wrote the following jQuery code:

$('#ment')
    .keydown(function(event) {
        $('#ment-chars-left').html('' + (512 - $textarea.val().length));
    });

The problem is that when typing .keydown is called first, which prints the number of remaining characters and then the new character typed is shown in the textarea. So the number of remaining characters does not have a correct value, being bigger by one unit. To make this work .keydown should be called after the insertion of the new character.

How can I resolve this problem?

I am trying to create a blog ment form with a textarea and a span which shows to the user the number of remaining characters that can be introduced in the text area.

So I have this form:

<form action="ment.php" method="POST" accept-charset="utf-8">
    <textarea name="ment" id="ment" rows="4" cols="56"></textarea>

    <input type="submit" value="Post" />
    <span id="ment-chars-left">512</span> characters left
</form>

And then I wrote the following jQuery code:

$('#ment')
    .keydown(function(event) {
        $('#ment-chars-left').html('' + (512 - $textarea.val().length));
    });

The problem is that when typing .keydown is called first, which prints the number of remaining characters and then the new character typed is shown in the textarea. So the number of remaining characters does not have a correct value, being bigger by one unit. To make this work .keydown should be called after the insertion of the new character.

How can I resolve this problem?

• javascript
• jquery
• html

Share Improve this question Follow asked Oct 6, 2011 at 11:35 Calin-Andrei BurloiuCalin-Andrei Burloiu 1,48122 gold badges1414 silver badges2525 bronze badges 2

• Not actually answering your question, but watch out for new lines, which can be one character or two depending on the browser and how the new line was added. – Alohci Commented Oct 6, 2011 at 12:08
• You are right in UNIX-like operating systems a new line is \n, but in Windows it is \r\n. – Calin-Andrei Burloiu Commented Oct 25, 2011 at 13:57

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Use keyup() instead.

You will also want to bind a few other events.

Use bind('keyup paste drop').

keyup for event when key is released, paste if someone pastes text in your textarea, and drop if someone drops a chunk of text in your textarea.

jsFiddle.

you could use $('#ment').keyup() :)

Why not use .keyup() ?

$('#ment')
    .keyup(function(event) {
        $('#ment-chars-left').html('' + (512 - $textarea.val().length));
    });

try the .keyup event instead

Use the keypress event instead, which happens when a key produces a character, not when the key is pressed. (For example the shift key causes a keydown event but not a keypress event, and a key that repeats causes keypress events for each character, but only a keydown event at the first one.)

Use the setTimeout method to start a timer that will run the code after the event has been handled:

$('#ment')
  .keypress(function() {
    window.setTimeout(function(){
      $('#ment-chars-left').html('' + (512 - $textarea.val().length));
    }, 0);
  });

本文标签： javascriptShow in real time the number of characters in a HTML textarea while the user typesStack Overflow