Sometimes you may get requirement to limit the text length in textbox using javascript. It is better approach to limit the text length in textbox because during development you must think that people can harm your whole database by entering the malicious text of thousands of characters if you don’t have applied any text limit in your input textbox or asp:textbox. If malicious text of thousands of characters is provided through textbox then two things can happen
1) Page will show an error after getting respond from database because the column of the table that will store the data might be have width of 100 characters.
2) Incase user enters the script code of thousands of characters then your website may be down or can have other related problem
So bottom line is ALWAYS LIMIT THE TEXT LENGTH IN TEXTBOX. In this tutorial I am covering this topic using javascript the client side language but later on in this blog you will find how to achieve same thing using asp.net the server side because javascript might be disable in user’s/hacker’s system. I write user’s because I believe user can also harm your database unintentionally if you have not taken any precautions.
1) Page will show an error after getting respond from database because the column of the table that will store the data might be have width of 100 characters.
2) Incase user enters the script code of thousands of characters then your website may be down or can have other related problem
So bottom line is ALWAYS LIMIT THE TEXT LENGTH IN TEXTBOX. In this tutorial I am covering this topic using javascript the client side language but later on in this blog you will find how to achieve same thing using asp.net the server side because javascript might be disable in user’s/hacker’s system. I write user’s because I believe user can also harm your database unintentionally if you have not taken any precautions.
Now let's have a look over how to apply limit to the text length in textbox either it is Singleline or Multiline.
I could apply the text limit in textbox without using any single line code of javascript by using maxlength property of textbox like given below
<input type="text" id="txtDescription" name="txtDescription" maxlength="2"/>
The maxlength attribute of textbox works fine when textbox is in singleline mode but what about if textbox is in multiline mode? If textbox is multiline (i;e; <textarea> in html) then you have to use the above mentioned javascript custom function and have to call that function using onkeydown and onblur event of multiline textbox.
For asp:Textbox
I have used onblur event because I know many hackers can use copy/paste to enter malicious text of thousands of characters and onblur() event will be proved as a safeguard on that scenario.
So this is the way to limit the text length in textbox using javascript.
Limit the text length in textbox using javascript
<html>
<head>
<title>
Limit the text length in textbox using javascript
</title>
<script language="javascript" type="text/javascript">
function checkLength(textboxID)
{
var maxLen; // max number of characters allowed
if(textboxID=="txtFirstName")
{
maxLen=20;
}
else if(textboxID=="txtLastName")
{
maxLen=30;
}
else
{
maxLen = 100;
}
var getValue;
getValue = document.getElementById(textboxID).value;
if (getValue.length > maxLen)
{
document.getElementById(textboxID).value = document.getElementById(textboxID).value.substring(0, maxLen);
}
}
</script>
</head>
<body>
<form>
<input type="text" id="txtFirstName" name="txtFirstName" onkeydown="checkLength(this.id);" onblur="checkLength(this.id);" /><br/><br/>
<input type="text" id="txtLastName" name="txtLastName" onkeydown="checkLength(this.id);" onblur="checkLength(this.id);" /><br/><br/>
<textarea id="txtDescription" rows="10" cols="10" onkeydown="checkLength(this.id);" onblur="checkLength(this.id);">
</textarea>
</form>
</body>
</html>
I could apply the text limit in textbox without using any single line code of javascript by using maxlength property of textbox like given below
<input type="text" id="txtDescription" name="txtDescription" maxlength="2"/>
The maxlength attribute of textbox works fine when textbox is in singleline mode but what about if textbox is in multiline mode? If textbox is multiline (i;e; <textarea> in html) then you have to use the above mentioned javascript custom function and have to call that function using onkeydown and onblur event of multiline textbox.
For asp:Textbox
<script language="javascript" type="text/javascript">
function checkLength(textboxID)
{
var maxLen; // max number of characters allowed
if(textboxID=="txtFirstName")
{
maxLen=20;
}
else if(textboxID=="txtLastName")
{
maxLen=30;
}
else
{
maxLen = 100;
}
var getValue;
getValue = document.getElementById(textboxID).value;
if (getValue.length > maxLen)
{
document.getElementById(textboxID).value = document.getElementById(textboxID).value.substring(0, maxLen);
}
}
</script>
<asp:TextBox ID="txtFirstName" runat="server" EnableTheming="false" Width="200px" onkeydown="checkLength(this.id);" onblur="checkLength(this.id);"></asp:TextBox><br/><br/>
<asp:TextBox ID="txtLastName" runat="server" EnableTheming="false" Width="200px" onkeydown="checkLength(this.id);" onblur="checkLength(this.id);"></asp:TextBox><br/><br/>
<asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Width="400px" EnableTheming="false"
Rows="5" cols="8" onkeydown="checkLength(this.id);" onblur="checkLength(this.id);"></asp:TextBox>
I have used onblur event because I know many hackers can use copy/paste to enter malicious text of thousands of characters and onblur() event will be proved as a safeguard on that scenario.
So this is the way to limit the text length in textbox using javascript.
1 comments:
Look at this simple jQuery plugin, which limits and counts the remaining chars:
http://plugins.jquery.com/project/CharsLeftCounter
Post a Comment