| |
 How to limit the maximum number of characters allowed in the Multiline textbox?
by: Itfunda
Product Type: Tips and Tricks (Books)
Technologies: ASP.NET jQuery
In this post, we are going to learn how to limit the maximum number of characters allowed in the Multi-line textbox (textarea) through client side (jQuery) as well as through server side (asp.net).
Through Server side code
ASPX Page
<asp:Label ID="lblMessage" runat="server" ForeColor="Red" EnableViewState="false" />
<p>
<asp:TextBox ID="txtDetails" runat="server" TextMode="MultiLine" Columns="50" Rows="5" /></p>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="SubmitData" />
Code behind
protected void SubmitData(object sender, EventArgs e)
{
// allow only 500 characters
var maxLength = 50;
if (txtDetails.Text.Trim().Length > maxLength)
{
lblMessage.Text = string.Format("Sorry, only {0} characters are allowed.",
maxLength);
return;
}
// go ahead and write code to save the data
}In the above code snippet, we have a Label, a Multiline TextBox and a Button. On click of the button, we have fired SubmitData server side method. In this event we have checked the length of the content entered into the TextBox against the maxLength variable value (that we are assuming is the maximum characters should be allowed for this TextBox, in our case it is 50) and if the content length is more than 50, we are showing a message that only 50 characters are allowed in the TextBox and terminating the execution of the code for this method by writing the return statement otherwise the execution will not fall into the if block and remaining code execute.
Through Client side - using jQuery
ASPX Page
<script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js"></script>
Max characters allowed is 10 :
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Columns="50" Rows="5"
ClientIDMode="Static" />
<label id="lblCharLeft">
</label>
<script language="javascript" type="text/javascript">
var maxLength = 10; // change here to change the max limit
// write the character left message
$(document).ready(function () {
$("#lblCharLeft").text(maxLength + " characters left");
});
// limit the characters
$("#TextBox1").keyup(function () {
var text = $(this).val();
var textLength = text.length;
if (textLength > maxLength) {
$(this).val(text.substring(0, (maxLength)));
alert("Sorry, you only " + maxLength + " characters are allowed");
}
else {
$("#lblCharLeft").text((maxLength - textLength) + " characters left.");
}
});
</script>
In the above code, first we have referred the jQuery file so that we shall be able to use the jQuery methods to achieve this functionality.
Apart from the Multiline textbox,we have an html label where we are showing how many more characters user is allowed to enter.
As soon as the page loads, we have displayed the maximum characters allowed for the TextBox in the lblCharLeft label. In our case we have hard coded the maximum characters allowed into the maxLength JavaScript variable. Using jQuery we have attached keyup event on the TextBox that fires whenever the user press any key and leave it. In this event, we have first stored the value of the TextBox in the text variable and then stored its length into the textLength variable. The next line compares the text length and max length allowed and if it exceeds then set first max characters allowed (in my case 10) into the TextBox and shows an alert message. If entered text is not more than the max allowed length, it writes a message of how many more characters are left into the html label.
|