Specifying the maximum length for a multi-line text field

Question

I am trying to use asp:

<asp:TextBox ID="txtInput" runat="server" TextMode="MultiLine"></asp:TextBox> 

I need a way to specify the maxlength property, but apparently there is no way for a multiline textbox . I tried using JavaScript for the onkeypress event:

 onkeypress="return textboxMultilineMaxNumber(this,maxlength)" function textboxMultilineMaxNumber(txt, maxLen) { try { if (txt.value.length > (maxLen - 1)) return false; } catch (e) { } return true; } 

While working well, the problem with this JavaScript function is that after writing characters, it does not allow you to delete and replace any of them, this behavior is undesirable.

Do you have any idea what I can change in the above code to avoid this or any other ways around it?

Answer 1

try this javascript:

 function checkTextAreaMaxLength(textBox,e, length) { var mLen = textBox["MaxLength"]; if(null==mLen) mLen=length; var maxLength = parseInt(mLen); if(!checkSpecialKeys(e)) { if(textBox.value.length > maxLength-1) { if(window.event)//IE e.returnValue = false; else//Firefox e.preventDefault(); } } } function checkSpecialKeys(e) { if(e.keyCode !=8 && e.keyCode!=46 && e.keyCode!=37 && e.keyCode!=38 && e.keyCode!=39 && e.keyCode!=40) return false; else return true; } 

In a control, call it like this:

 <asp:TextBox Rows="5" Columns="80" ID="txtCommentsForSearch" MaxLength='1999' onkeyDown="checkTextAreaMaxLength(this,event,'1999');" TextMode="multiLine" runat="server"> </asp:TextBox> 

You can also just use the checkSpecialKeys function to check the input in your javascript implementation.

Answer 2

Instead, use the regular expression checker . This will work on the client side using JavaScript, but also when JavaScript is disabled (since length checking will be performed on the server as well).

The following example checks that the value entered is between 0 and 100 characters:

 <asp:RegularExpressionValidator runat="server" ID="valInput" ControlToValidate="txtInput" ValidationExpression="^[\s\S]{0,100}$" ErrorMessage="Please enter a maximum of 100 characters" Display="Dynamic">*</asp:RegularExpressionValidator> 

There are, of course, more complex regular expressions that you can use to better suit your goals.

Answer 3

Collapse by yourself:

 function Count(text) { //asp.net textarea maxlength doesnt work; do it by hand var maxlength = 2000; //set your value here (or add a parm and pass it in) var object = document.getElementById(text.id) //get your object if (object.value.length > maxlength) { object.focus(); //set focus to prevent jumping object.value = text.value.substring(0, maxlength); //truncate the value object.scrollTop = object.scrollHeight; //scroll to the end to prevent jumping return false; } return true; } 

Call:

 <asp:TextBox ID="foo" runat="server" Rows="3" TextMode="MultiLine" onKeyUp="javascript:Count(this);" onChange="javascript:Count(this);" ></asp:TextBox> 

Answer 4

keep it simple. Most modern browsers support the maxlength attribute in the text area (including IE), so just add this attribute to your code. No JS, no jquery, no inheritance, no custom code, no fuss, no muss.

VB.Net:

 fld_description.attributes("maxlength") = 255 

FROM#

 fld_description.attributes["maxlength"] = 255 

Answer 5

Another way to fix this for these browsers (Firefox, Chrome, Safari) that support maxlength in textareas (HTML5) without javascript is to get a subclass of the System.Web.UI.WebControls.TextBox class and override the Render method. Then in the overridden method add maxlength attribute before rendering as usual.

 protected override void Render(HtmlTextWriter writer) { if (this.TextMode == TextBoxMode.MultiLine && this.MaxLength > 0) { writer.AddAttribute(HtmlTextWriterAttribute.Maxlength, this.MaxLength.ToString()); } base.Render(writer); } 

Answer 6

use custom attribute maxsize = "100"

 <asp:TextBox ID="txtAddress" runat="server" maxsize="100" Columns="17" Rows="4" TextMode="MultiLine"></asp:TextBox> <script> $("textarea[maxsize]").each(function () { $(this).attr('maxlength', $(this).attr('maxsize')); $(this).removeAttr('maxsize'); }); </script> 

it will look like this:

 <textarea name="ctl00$BodyContentPlac eHolder$txtAddress" rows="4" cols="17" id="txtAddress" maxlength="100"></textarea> 

Answer 7

 $('#txtInput').attr('maxLength', 100); 

Answer 8

I tried different approaches, but each of them had some weaknesses (i.e. with cut and paste or browser compatibility). This is the solution I'm using right now:

 function multilineTextBoxKeyUp(textBox, e, maxLength) { if (!checkSpecialKeys(e)) { var length = parseInt(maxLength); if (textBox.value.length > length) { textBox.value = textBox.value.substring(0, maxLength); } } } function multilineTextBoxKeyDown(textBox, e, maxLength) { var selectedText = document.selection.createRange().text; if (!checkSpecialKeys(e) && !e.ctrlKey && selectedText.length == 0) { var length = parseInt(maxLength); if (textBox.value.length > length - 1) { if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } } } function checkSpecialKeys(e) { if (e.keyCode != 8 && e.keyCode != 9 && e.keyCode != 33 && e.keyCode != 34 && e.keyCode != 35 && e.keyCode != 36 && e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40) { return false; } else { return true; } } 

In this case, I call multilineTextBoxKeyUp on key up and multilineTextBoxKeyDown on the keyboard down:

 myTextBox.Attributes.Add("onkeyDown", "multilineTextBoxKeyDown(this, event, '" + maxLength + "');"); myTextBox.Attributes.Add("onkeyUp", "multilineTextBoxKeyUp(this, event, '" + maxLength + "');"); 

Answer 9

Take a look at this one . The only way to solve this problem is javascript as you tried.

EDIT: Try changing the event by pressing a key.

Answer 10

Use the HTML text box with runat="server" to access it on the server side. This solution has less pain than using javascript or regular expression.

 <textarea runat="server" id="txt1" maxlength="100" /> 

Note. To access the Server-side Text Property, you must use txt1.Value instead of txt1.Text

Answer 11

In HTML5, things have changed:

Aspx:

 <asp:TextBox ID="txtBox" runat="server" maxlength="2000" TextMode="MultiLine"></asp:TextBox> 

FROM#:

 if (!IsPostBack) { txtBox.Attributes.Add("maxlength", txtBox.MaxLength.ToString()); } 

Highlighted HTML:

 <textarea name="ctl00$DemoContentPlaceHolder$txtBox" id="txtBox" maxlength="2000"></textarea> 

---

Metadata for Attributes :

Summary: Gets a collection of custom attributes (for rendering only) that do not match the properties of the control.

Returns: A System.Web.UI.AttributeCollection of name and value pairs.

Answer 12

The following example in JavaScript / Jquery will do this -

 <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> <script type="text/javascript"> function count(text, event) { var keyCode = event.keyCode; //THIS IS FOR CONTROL KEY var ctrlDown = event.ctrlKey; var maxlength = $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val().length; if (maxlength < 200) { event.returnValue = true; } else { if ((keyCode == 8) || (keyCode == 9) || (keyCode == 46) || (keyCode == 33) || (keyCode == 27) || (keyCode == 145) || (keyCode == 19) || (keyCode == 34) || (keyCode == 37) || (keyCode == 39) || (keyCode == 16) || (keyCode == 18) || (keyCode == 38) || (keyCode == 40) || (keyCode == 35) || (keyCode == 36) || (ctrlDown && keyCode == 88) || (ctrlDown && keyCode == 65) || (ctrlDown && keyCode == 67) || (ctrlDown && keyCode == 86)) { event.returnValue = true; } else { event.returnValue = false; } } } function substr(text) { var txtWebAdd = $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val(); var substrWebAdd; if (txtWebAdd.length > 200) { substrWebAdd = txtWebAdd.substring(0, 200); $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val(''); $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val(substrWebAdd); } } 

Answer 13

This snippet worked in my case. I was looking for a solution and thought of writing it so that it could help any future reader.

ASP

 <asp:TextBox ID="tbName" runat="server" MaxLength="250" TextMode="MultiLine" onkeyUp="return CheckMaxCount(this,event,250);"></asp:TextBox> 

Java script

 function CheckMaxCount(txtBox,e, maxLength) { if(txtBox) { if(txtBox.value.length > maxLength) { txtBox.value = txtBox.value.substring(0, maxLength); } if(!checkSpecialKeys(e)) { return ( txtBox.value.length <= maxLength) } } } function checkSpecialKeys(e) { if(e.keyCode !=8 && e.keyCode!=46 && e.keyCode!=37 && e.keyCode!=38 && e.keyCode!=39 && e.keyCode!=40) return false; else return true; } 

@ Raúl Roa The answer worked for me in the case of copy / paste. while this is happening.

Answer 14

 $("textarea[maxlength]").on("keydown paste", function (evt) { if ($(this).val().length > $(this).prop("maxlength")) { if (evt.type == "paste") { $(this).val($(this).val().substr(0, $(this).prop("maxlength"))); } else { if ([8, 37, 38, 39, 40, 46].indexOf(evt.keyCode) == -1) { evt.returnValue = false; evt.preventDefault(); } } } }); 

Answer 15

Here's how we did it (stores all the code in one place):

 <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"/> <% TextBox1.Attributes["maxlength"] = "1000"; %> 

Just in case, someone else uses web forms in 2018 ..

Answer 16

You can specify the maximum length for a multi-line text field in the pageLoad Javascript event.

 function pageLoad(){ $("[id$='txtInput']").attr("maxlength","10"); } 

I set the maximum length property of the multi-line text field txtInput to 10 characters in the JavaScript pageLoad () JavaScript function

Answer 17

This is the same as @KeithK's answer, but with some details. First create a new TextBox based control.

 using System.Web.UI; using System.Web.UI.WebControls; namespace MyProject { public class LimitedMultiLineTextBox : System.Web.UI.WebControls.TextBox { protected override void Render(HtmlTextWriter writer) { this.TextMode = TextBoxMode.MultiLine; if (this.MaxLength > 0) { writer.AddAttribute(HtmlTextWriterAttribute.Maxlength, this.MaxLength.ToString()); } base.Render(writer); } } } 

Please note that the code above always sets the text mode to multi-line.

To use this, you need to register it on the aspx page. This is necessary because you need to reference it using TagPrefix, otherwise the compilation will complain about user-defined common controls.

 <%@ Register Assembly="MyProject" Namespace="MyProject" TagPrefix="mp" %> <mp:LimitedMultiLineTextBox runat="server" Rows="3" ...