Show how many characters remaining in a html text box using javascript

By: Emiley J. Emailed: 1598 times Printed: 2044 times    

Latest comments
By: rohit kumar - how this program is work
By: Kirti - Hi..thx for the hadoop in
By: Spijker - I have altered the code a
By: ali mohammed - why we use the java in ne
By: ali mohammed - why we use the java in ne
By: mizhelle - when I exported the data
By: raul - no output as well, i'm ge
By: Rajesh - thanx very much...
By: Suindu De - Suppose we are executing

Assuming you have a html form that has a textarea or a input text box to enter text. If you only have to allow a specic number of characters into that box and remove any text that he enters after the set limit, and the same time when the user starts typing in the text box if you want to show how many characters are remaining then you can do so using this simple but effective java script.

For this you will need the following.

  1. a text box that will show the number of characters remaining,
  2. a textarea to allow user to input data
  3. a javascript that does the trick.

For step 1.

Add the following code in your form.

<input onblur="textCounter(this.form.recipients,this,306);" disabled  onfocus="this.blur();" tabindex="999" maxlength="3" size="3" value="306" name="counter">

For step 2. 

Add the textarea to accept input

<textarea onblur="textCounter(this,this.form.counter,306);" onkeyup="textCounter(this,this.form.counter,306);" style="WIDTH: 608px; HEIGHT: 94px" name="message" rows="1" cols="15" >
</textarea>

For step 3.

Add the following function in your html page.

function textCounter( field, countfield, maxlimit ) {
 if ( field.value.length > maxlimit ) {
  field.value = field.value.substring( 0, maxlimit );
  field.blur();
  field.focus();
  return false;
 } else {
  countfield.value = maxlimit - field.value.length;
 }
}

Thats it you are done. You can try this code in your page and it will work as below.

characters remaining.


Javascript Home | All Javascript Tutorials | Latest Javascript Tutorials

Sponsored Links

If this tutorial doesn't answer your question, or you have a specific question, just ask an expert here. Post your question to get a direct answer.



Bookmark and Share

Comments(5)


1. View Comment

when i use this, the textarea automatically creates whitespaces.

How can this be solved?


View Tutorial          By: gary at 2011-06-08 07:14:09
2. View Comment

Works great, thanks! However, is there any way to prevent the counter from resetting whenever data from the form is posted to PHP server? If the post fails because a mandatory field isn't filled in correctly, the text is returned to the box (using PHP), but the counter is reset (even though there is text in the box)!

View Tutorial          By: MisterCrow at 2013-04-30 11:56:49
3. View Comment

very good to use

View Tutorial          By: baby at 2013-06-14 12:08:14
4. View Comment

Great example. To reset the initial value on readback, I used <input onblur="textCounter(this.form.recipients,this,1024);" disabled onfocus="this.blur();" tabindex="9999" maxlength="4" size="4" value="<?php echo(1024-strlen($message)); ?>" name="counter" /> characters available

That works. Thank a lot.


View Tutorial          By: Bala at 2014-07-22 04:48:34
5. View Comment

There is a major bug here. When i press backspace key, even then the counter keeps increasing. So in textCounter(), check if the key pressed in backspace/ delete . If yes, reduce the counter. If it is an alphabet/number increase the counter

View Tutorial          By: Rajasri at 2015-01-20 10:11:30

Your name (required):


Your email(required, will not be shown to the public):


Your sites URL (optional):


Your comments:



More Tutorials by Emiley J.
Error generating R.java from manifest
ERROR 1251: Client does not support authentication protocol requested by server; consider upgrading MySQL client
IIS and Tomcat - how to configure to work together
PHP Warning: Unknown(): Unable to load dynamic library '/usr/local/php4/lib/php/extensions/no-debug ......
Adding your own Application icon for your J2ME application (jar file)
Creating Menus in Code using VB.net
Traversing all files in a directory using Ruby
Using Proxy to connect to URLs in Ruby
POST a form in Ruby
Reading URL content using Ruby (HTTP)
dRuby client/server mode sample program
Benchmark module in Ruby
encoding and decoding in Ruby using Base64 Module
Module Abbrev in Ruby
Standard Library Packages in Ruby

More Tutorials in Javascript
Use WinSCP to transfer log files remotely using Javascript
Verifying user input in JavaScript
Pause execution in JavaScript
Javascript to display client date and time on webpage
Getting Browser's height and width using Javascript
Highlighting text on a page using CSS
Using revealTrans to do page transitions in Javascript
Password protect a web page using Javascript
Diabling Right Click option in a browser using Javascript
Scrolling message on the status bar using Javascript
window.frames[i] in Javascript
Form validation using Javascript
Using && in Javascript
The if statement in Javascript
do-while, while, for and for-in loops in Javascript

More Latest News
Most Viewed Articles (in Javascript )
Using parseInt() and parseFloat() in JavaScript to convert data types to Numbers
Form validation using Javascript
Typecasting in Javascript
Show how many characters remaining in a html text box using javascript
List of Keywords and reverved words in Javascript
Scrolling message on the status bar using Javascript
Click to remove an element from a select html form using javascript
Using ! and !! in Javascript
The if statement in Javascript
switch in Javascript
Using revealTrans to do page transitions in Javascript
Password protect a web page using Javascript
Verifying user input in JavaScript
History and evolution of Javascript
Javascript Basics
Most Emailed Articles (in Javascript)
Javascript Basics
Using ! and !! in Javascript
switch in Javascript
window.frames[i] in Javascript
Password protect a web page using Javascript
Scrolling message on the status bar using Javascript
Verifying user input in JavaScript
Show how many characters remaining in a html text box using javascript
Click to remove an element from a select html form using javascript
History and evolution of Javascript
List of Keywords and reverved words in Javascript
Using toString() in JavaScript to convert data types to String
Using parseInt() and parseFloat() in JavaScript to convert data types to Numbers
Typecasting in Javascript
Bitwise NOT, AND, OR, XOR operators in Javascript