Duminda Chamara

Sunday, November 29, 2009

Limit characters in textarea

How to limit the number of characters entered in a text box or text aria in JavaScript?

Following example shows you how to limit characters in a text area in javascript as a client side validation.

In some cases you may want to limit number of input characters in a text box or text aria. In such situation you can use a very simple JavaScript to do it. In HTML there is no way to limit the input characters in a text box or text area. Using following JavaScript you can limit the input character length as client-side validation. This JavaScript works on onkeyup event of the text box / text area. When user entered a character from the keyboard it counts the total length of the text you have entered. It shows a message when you are tried to enter a single character more than the character length you defined.

Demo- Limit characters in a text area using JavaScript.
JavaScript Character Counter
1.Enter description (50 characters only).
Characters remaining view code
2.Limit characters in a text area.
Enter number of characters you want to limit.
Enter your text here
Characters remaining view code

Try it!
Bookmark and Share

1. Example code for limit number of input characters in a text area using JavaScript.

JavaScript Code
<script type="text/javascript" language="javascript"> <!-- function limitInputCharacters(inputText,limit){ var text=inputText; if(text.length>limit){ alert("You have entered more than "+limit+" characters!"); document.getElementById("txtLimitCharacters").value=text.substr(0,limit); return false; } document.getElementById("charactersRemaining").value=(limit-text.length); return true; } --> </script>
Html Code
<html> <head> <title>How to Limit Characters in a Text Area </title> </head> <body> <table border="0"> <tr> <td valign="top"> 1.Enter description (50 characters only). </td> <td align="left"> <textarea name="txtLimitCharacters" cols="40" rows="8" id="txtLimitCharacters" onkeyup="javascript:limitInputCharacters(this.value,50);" ></textarea> </td> <td align="left">&nbsp;</td> </tr> <tr> <td align="right">Characters remaining </td> <td align="left" > <input name="charactersRemaining" type="text" id="charactersRemaining" disabled="disabled" size="5" /> </td> <td align="left"> </td> </tr> </table> </body> </html>

2. Limit user input text using JavaScript.

<script type="text/javascript" language="javascript"> <!--
function limitCharacters(inputText){ var text=inputText; var characterLimit=document.getElementById("numberOfCharacters").value; if(!isNaN(characterLimit)&& parseInt(characterLimit)>0){ if(text.length>characterLimit){ alert("You are only allowed to enter maximum "+parseInt(characterLimit)+" characters only"); document.getElementById("javaScriptCharacterCounter").value=text.substr(0,characterLimit); return false; }else{ document.getElementById("charactersRemaining2").value=(characterLimit-text.length); } }else{ alert("Please enter valid integer value for\nCharacter limit"); document.getElementById("numberOfCharacters").value="50"; document.getElementById("javaScriptCharacterCounter").value=""; document.getElementById("numberOfCharacters").focus(); return false; } } </script>
Html Code
<html> <head> <title>How to limit user input text in text area </title> </head> <body> <table border="0"> <tr> <td align="right">Enter number of characters you want to limit. </td> <td align="left" ><input name="numberOfCharacters" type="text" id="numberOfCharacters" value="50" size="5" /></td> <td align="left">&nbsp;</td> </tr> <tr> <td align="right">Enter your text here </td> <td align="left" ><textarea name="javaScriptCharacterCounter" cols="40" rows="8" id="javaScriptCharacterCounter" onkeyup="javascript:limitCharacters(this.value);" ></textarea></td> <td align="left">&nbsp;</td> </tr> <tr> <td align="right">Characters remaining </td> <td align="left" ><input name="charactersRemaining2" type="text" id="charactersRemaining2" disabled="disabled" size="5" /></td> <td align="left"> </td> </tr> </table> </body> </html>
» How to get screen resolution in JavaScript
» How to limit characters in textarea using JavaScript
» How to validate decimal number in JavaScript
» How to validate an email address in JavaScript
» How to validate date using JavaScript
» JavaScript String functions
» How to validate multiple select list box in JavaScript
» How to generate random numbers in JavaScript
» How to validate multiple check box in JavaScript
» How to validate user login in JavaScript
» How to validate drop down list in JavaScript
» How to validate radio button group in JavaScript
» How to create JavaScript alerts
» How to create popup windows in JavaScript
» How to count words in a text area using JavaScript
©-Copyright By Duminda Chamara JavaScript Validation