Character Count in jQuery | PHP Tutorial For Beginners

This tutorial shows how to count the characters typed into a textarea in real time using jQuery. As the user types, a live counter updates below the field.

Example

Attach an onkeyup handler to a textarea. Inside the handler, read input.value.length and write it to a display element using $('#charcount').text().

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script>
      function countCharacter(input) {
          var len = input.value.length;
          $('#charcount').text('Character Count: ' + len);
      }
    </script>
  </head>
  <body>
    <textarea id="desc" onkeyup="countCharacter(this)"></textarea>
    <div id="charcount"></div>
  </body>
</html>

How It Works

onkeyup="countCharacter(this)" — fires after every key press, passing the textarea element as input.
input.value.length — returns the current number of characters in the field.
$('#charcount').text(...) — updates the counter display without a page reload.

Hope this tutorial is useful for you. Keep following PHP Tutorial for Beginners for more help.