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.
Try it!
| 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!
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"> </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"> </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"> </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>
©-Copyright By Duminda Chamara
JavaScript Validation
0 comments:
Post a Comment