<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?
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.
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.
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.
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 MultiLineLimit
class 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With