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.
- a text box that will show the number of characters remaining,
- a textarea to allow user to input data
- 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.
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
Comment on this tutorial
- Data Science
- Android
- AJAX
- ASP.net
- C
- C++
- C#
- Cocoa
- Cloud Computing
- HTML5
- Java
- Javascript
- JSF
- JSP
- J2ME
- Java Beans
- EJB
- JDBC
- Linux
- Mac OS X
- iPhone
- MySQL
- Office 365
- Perl
- PHP
- Python
- Ruby
- VB.net
- Hibernate
- Struts
- SAP
- Trends
- Tech Reviews
- WebServices
- XML
- Certification
- Interview
categories
Related Tutorials
Use WinSCP to transfer log files remotely using Javascript
Verifying user input 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
Scrolling message on the status bar using Javascript
Diabling Right Click option in a browser using Javascript
Password protect a web page using Javascript
Using revealTrans to do page transitions in Javascript
Form validation using Javascript
window.frames[i] in Javascript
Math object and Math functions in Javascript