Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to limit the number of characters allowed in a textbox?

Tags:

<asp:TextBox ID="txtBodySMS" runat="server" Rows="10"                                      TextMode="MultiLine" Width="100%"></asp:TextBox> 

This is my text box. How do I limit the number of characters a user can type inside it?

like image 442
Beginner Avatar asked May 24 '11 13:05

Beginner


People also ask

What is the limit of characters in text field type?

How To: Use the Text Field. The Text field is one of the most generic and common data entry fields used to capture text type data—letters, numbers, and symbols. Text fields hold up to 255 characters in a single line.

How do I limit characters in text CSS?

While you can't use CSS alone to do this, you can limit the amount of characters show using CSS as Darren has suggested. You need to set your text container to white-space: no-wrap, text-overflow: ellipsis, and overflow:hidden. Then simply set the size for your container.

How do I show character limit in HTML?

Given an input field and the task is to set the minimum/maximum number of characters allowed in an input field in HTML. To set the maximum character limit in input field, we use <input> maxlength attribute. This attribute is used to specify the maximum number of characters enters into the <input> element.


1 Answers

MaxLength does not apply to ASP.NET to Textboxes with TextMode="MultiLine". An easy way to do this and keep your MultiLine mark up would be to add:

onkeypress="return this.value.length<=10"  

with 10 being the limit. Like so:

<asp:TextBox ID="txtBodySMS" runat="server" Rows="10" onkeypress="return this.value.length<=10" TextMode="MultiLine" Width="100%"></asp:TextBox> 

 

EDIT Option One (Server side) The above example has some issues pointed out over the years. The underlying problem is a multi-line textBox is rendered as a text-area and MaxLength is removed. We can also fix in the C# or VB asp.net code behind of the page by forcing the re-attachment of MaxLength instead of attaching onkeypress.

    protected void Page_Load(object sender, EventArgs e)     {         txtBodySMS.Attributes.Add("maxlength", "10");     } 

EDIT Option Two (Client side): Here's a simple jquery solution. Include the following script in your head instead of attaching onkeypress or editing the server side code.

    $(document).ready(function () {         $(".MultiLineLimit").on('change keydown paste input', function () {             this.value = (this.value.length <= 10 ? this.value : this.value.substring(0, 10));         });     }); 

Now just add the MultiLineLimitclass to any of your <asp:TextBox> textbox of TextMode="MultiLine".

<asp:TextBox ID="txtBodySMS" CssClass="MultiLineLimit" runat="server" Rows="10" TextMode="MultiLine" Width="100%"></asp:TextBox> 

Remember in either scenario client side validation can be removed. If your storing this in a database it should always be validated server side as well.

like image 120
clamchoda Avatar answered Oct 01 '22 04:10

clamchoda