Character count with JavaScript


Home - Tutorials - Forms

This article demonstrates you how to count characters in an input field on your html page using simple JavaScript code.

Tutorial info:


Name:Character count with JavaScript
Total steps:1
Category:Forms
Date:2010-11-25
Level:Beginner
Product:See complete product
Viewed:13931

Bookmark Character count with JavaScript



AddThis Social Bookmark Button

Step 1 - Character count with JavaScript


Character count with JavaScript

Let’s see the situation when you want to inform the user how many characters was entered in an input field. To solve this problem we will perform the following steps:

 

  1. Create a simple HTML page with a textarea, and an information box
  2. Create a JavaScript function that counts the characters
  3. Setup a trigger on the textarea to execute the function on keypress

 

And now let’s see how the implementation looks like:

Step 1. 

The HTML page is really simple just a textarea and a span block with an id where the character count will be displayed. The code looks like this:

Code:
  1. <html>
  2.    <head>
  3.    </head>
  4.  
  5.    <body>
  6.       <textarea id="inputToCount"></textarea>
  7.       <br/>Characters: <span id="counterInfo">0</span>
  8.    </body>
  9. </html>

Step 2.

This is the most important part of the tutorial. The concept is that we create a function that reads the text from the textarea, calculates its length and displays the result in the corresponding span block. The function needs to id parameter, one for the id of the relevant element - in this case the textarea - and the other id is the id of the span block where we want to display the result. The function body is the following:

Code:
  1. function characterCount(inputFieldId, infoBlockId) {
  2.  
  3. }

The next step is to implement the real character counting routine. This is fortunately quite simple. We just need to get the element by its id, read the value parameter and get its length like this:

Code:
  1. var characters = document.getElementById(inputFieldId).value.length;

After that we need to update the information block in the following way. Get the element, get its content and change it to the new value. The code looks like this:

Code:
  1. document.getElementById(infoBlockId).innerHTML = characters;

and the complete function is the following:

Code:
  1. function characterCount(inputFieldId, infoBlockId) {
  2.    var characters = document.getElementById(inputFieldId).value.length;
  3.    document.getElementById(infoBlockId).innerHTML = characters;
  4. }
  5.  

Step 3. 

The final task is to setup a trigger that calls our function. In this example we use the onkeyup event. (Of course you can use any other event as you want.)

The final code looks like this:

Code:
  1. <html>
  2.    <head>
  3.       <script type="text/javascript">
  4.          function characterCount(inputFieldId, infoBlockId) {
  5.             var characters = document.getElementById(inputFieldId).value.length;
  6.             document.getElementById(infoBlockId).innerHTML = characters;
  7.          }
  8.       </script>
  9.    </head>
  10.  
  11.    <body>
  12.       <textarea id="inputToCount" onkeyup="characterCount('inputToCount','counterInfo');"></textarea>
  13.       <br/>Characters: <span id="counterInfo">0</span>
  14.    </body>
  15. </html>






Tags: character count, character counter, javascript character count, how-to

Character count with JavaScript - Table of contents
Step 1 - Character count with JavaScript



GAD Tower



Family tutorials
PHP Array
PHP Redirect
PHP Session
AJAX PHP
AJAX File Upload
AJAX Rating System
MySQL Create User
Mysqldump Example
MySQL Concat

Total time: 0.1583