Count characters in textarea


I want to count characters in a textarea, so I just made:

<textarea id="field" onkeyup="countChar(this)"></textarea>

function countChar(val){
     var len = val.value.length;
     if (len >= 500) {
              val.value = val.value.substring(0, 500);
     } else {
              $('#charNum').text(500 - len);

What's wrong with my piece of code? It does not work! Well, that was a newbie handwriting, need a help.

2/9/2013 3:41:33 PM

Accepted Answer

What errors are you seeing in the browser? I can understand why your code doesn't work if what you posted was incomplete, but without knowing that I can't know for sure.

<!DOCTYPE html>
    <script src=""></script>
      function countChar(val) {
        var len = val.value.length;
        if (len >= 500) {
          val.value = val.value.substring(0, 500);
        } else {
          $('#charNum').text(500 - len);

    <textarea id="field" onkeyup="countChar(this)"></textarea>
    <div id="charNum"></div>


... works fine for me.

Edit: You should probably clear the charNum div, or write something, if they are over the limit.

1/12/2013 7:36:26 PM

⚠️ The accepted solution is flawed.

Here are two scenarios where the keyup event will not get fired:

  1. The user drags text into the textarea.
  2. The user copy-paste text in the textarea with a right click (contextual menu).

Use the HTML5 input event instead for a more robust solution:

<textarea maxlength='140'></textarea>

JavaScript (demo):

const textarea = document.querySelector("textarea");

textarea.addEventListener("input", event => {
    const target = event.currentTarget;
    const maxLength = target.getAttribute("maxlength");
    const currentLength = target.value.length;

    if (currentLength >= maxLength) {
        return console.log("You have reached the maximum number of characters.");

    console.log(`${maxLength - currentLength} chars left`);

And if you absolutely want to use jQuery:

$('textarea').on("input", function(){
    var maxlength = $(this).attr("maxlength");
    var currentLength = $(this).val().length;

    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
        console.log(maxlength - currentLength + " chars left");

HTML sample, used wherever I need a counter, notice the relevance of IDs of textarea and second span : id="post" <-> id="rem_post" and the title of the span that holds the desired characters amount of each particular textarea

<textarea class="countit" name="post" id="post"></textarea>
  <span>characters remaining: <span id="rem_post" title="1000"></span></span>

JavaScript function, usually placed before </body> in my template file, requires jQuery

$(".countit").keyup(function () {
  var cmax = $("#rem_" + $(this).attr("id")).attr("title");

  if ($(this).val().length >= cmax) {
    $(this).val($(this).val().substr(0, cmax));

  $("#rem_" + $(this).attr("id")).text(cmax - $(this).val().length);


this worked fine for me.

$('#customText').on('keyup', function(event) {
   var len = $(this).val().length;
   if (len >= 40) {
      $(this).val($(this).val().substring(0, len-1));

substring() needs to become substr().



Well, this is not that different from what have been said, but this works very well in all browsers.

The idea is to delete any text which overflows the defined length.

function countTextAreaChar(txtarea, l){
    var len = $(txtarea).val().length;
    if (len > l) $(txtarea).val($(txtarea).val().slice(0, l));
    else $('#charNum').text(l - len);

The HTMl code would be:

<div id="charNum"></div>
<textarea onkeyup="countTextAreaChar(this, 10)" class="textareaclass" id="smallword" rows="40" cols="30" name="smallword"></textarea>

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]