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

By: Emiley J. Viewed: 180 times  Printer Friendly Format    


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.



Most Viewed Articles (in Javascript )

Latest Articles (in Javascript)

Comment on this tutorial

Subscribe to Tutorials

Related Tutorials

Archived Comments

1. when i use this, the textarea automatically create
View Tutorial          By: gary at 2011-06-08 07:14:09

2. Thank you, for good artical.
View Tutorial          By: Abby at 2013-01-30 07:22:09

3. Works great, thanks! However, is there any way to
View Tutorial          By: MisterCrow at 2013-04-30 11:56:49

4. very good to use
View Tutorial          By: baby at 2013-06-14 12:08:14

5. Great example. To reset the initial value on readb
View Tutorial          By: Bala at 2014-07-22 04:48:34

6. There is a major bug here. When i press backspace
View Tutorial          By: Rajasri at 2015-01-20 10:11:08

7. There is a major bug here. When i press backspace
View Tutorial          By: Rajasri at 2015-01-20 10:11:30

8. It didn't work... The counter didn't work
View Tutorial          By: ISAAC at 2015-12-03 09:33:46

9. Really wonderful information can be found on web b
View Tutorial          By: Smithg196 at 2016-08-14 18:40:21

10. Today, while I was at work, my sister stole my app
View Tutorial          By: Smithc717 at 2017-09-05 08:07:56