TextBox Tips and Tricks Part-III

SheoNarayan
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 5736 red flag
Rating: 5 out of 5  
 1 vote(s)

In this article we shall learn how to limit the maximum number of characters allowed in the Mult-iline textbox, how to avoid text wrapping into the Multi-line textbox, how to apply CSS style into the asp:TextBox and how to set the default focus on the TextBox when page loads.

TextBox control is used to display a TextBox on the web page to take input from the user.

I have written hundreds of ASP.NET How to Tips and Tricks, click here to get them all.

How to limit the maximum number of characters allowed in the Multiline textbox?

In case we need to limit the maximum number of characters allowed in the multiline TextBox (textarea) we can use this approach. In this we are going to learn how to do this through server side code as well as through client side code (using jQuery). This also shows how many characters are left till the maximum limit reaches.

Through server side

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

}

OUTPUT

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.

Output

How to avoid text wrapping into the multi-line textbox.

Generally long sentences are wrapped in the multiline textbox, in case we want to avoid wrapping of the text, we can use this approach.

ASPX Page

<p>

<asp:TextBox ID="TextBox5" runat="server" TextMode="MultiLine" Rows="5" Wrap="false"

Columns="50"></asp:TextBox>

</p> 

Output

By default, when the content is written into the Multiline TextBox and it exceeds the width of the TextBox, the content wraps into the next line. If we do not want this behaviour, we can set Wrap property of the TextBox to false that will display the horizontal scrollbar in case the content exceeds the width of the TextBox. If we want our content to appear in the next line, we will need to press Enter key.

How to apply CSS style into the asp:TextBox.

ASPX Page

 

<asp:TextBox ID="txtCSSStyle" runat="server" ForeColor="Red" BorderColor="Green" />

Code behind

protected void Page_Load(object sender, EventArgs e)

{

txtCSSStyle.Font.Bold = true;

txtCSSStyle.Font.Strikeout = true;

}

 

Output

CSS style can be applied into the TextBox in two ways,

  •  From the ASPX page by setting up CSS styles attributes
  •  From the code behind by setting up CSS styles attributes using the TextBox id (this applies to all other ASP.NET control as well).

How to set default focus to a particular TextBox when web page loads.

In case we want to auto focus a TextBox when page loads, we can use this approach. For example, in the login page, we can auto focus the Username textbox so that when page loads the cursor starts blinking in this textbox automatically.

ASPX Page

<p>First Name: <asp:TextBox ID="txtFirstName" runat="server" /></p>

<p>First Name: <asp:TextBox ID="txtLastName" runat="server" /></p>

<p>First Name: <asp:TextBox ID="txtAge" runat="server" Columns="3" /></p>

<asp:Button ID="btnSubmit" runat="server" Text="Submit" /> 

Code behind

protected void Page_Load(object sender, EventArgs e)

{

txtFirstName.Focus();

}

In the above code snippet, we have placed three TextBoxes and one submit button. we want to focus the first textbox by default whenever page loads. To do that we have called the Focus method of the txtFirstName from the code behind Page_Load event that causes the cursor placed in the first TextBox when page loads.

Output

Thanks for reading and stay tuned for more articles !
 

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Hareesh on: 1/11/2012 | Points: 25
Hi this is very helpful article.
thanks.

Login to post response

Comment using Facebook(Author doesn't get notification)