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

By: Emiley J.  

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.




Archived Comments

1. Today, while I was at work, my sister stole my apple ipad and tested to see if it can survive a 30 f
View Tutorial          By: Smithc717 at 2017-09-05 08:07:56

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

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

4. There is a major bug here. When i press backspace key, even then the counter keeps increasing. So in
View Tutorial          By: Rajasri at 2015-01-20 10:11:30

5. There is a major bug here. When i press backspace key, even then the counter keeps increasing. So in
View Tutorial          By: Rajasri at 2015-01-20 10:11:08

6. Great example. To reset the initial value on readback, I used <input onblur="textCounte
View Tutorial          By: Bala at 2014-07-22 04:48:34

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

8. Works great, thanks! However, is there any way to prevent the counter from resetting whenever data f
View Tutorial          By: MisterCrow at 2013-04-30 11:56:49

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

10. when i use this, the textarea automatically creates whitespaces.

How can this be solv

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


Most Viewed Articles (in Javascript )

Latest Articles (in Javascript)

Comment on this tutorial