为多行文本框指定最大长度答案

【问题标题】：Specifying maxlength for multiline textbox为多行文本框指定最大长度
【发布时间】：2010-11-22 23:41:06
【问题描述】：

我正在尝试使用asp：

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

我想要一种方法来指定maxlength 属性，但显然multiline textbox 是不可能的。我一直在尝试为 onkeypress 事件使用一些 JavaScript：

onkeypress="return textboxMultilineMaxNumber(this,maxlength)"

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

虽然这个 JavaScript 函数工作正常，但问题在于，在写入字符后，它不允许您删除和替换其中的任何字符，这种行为是不希望的。

你知道我可以在上面的代码中改变什么来避免这种情况或任何其他方法来绕过它吗？

【问题讨论】：

尝试了所有答案，scottyboiler 的答案绝对是接近理想的解决方案。所有其他都有小问题（不要使用复制粘贴，MaxLength 参数在 IE 中不起作用等）。
我在这里第二个@kape123。所有其他人都有失败。毕竟我们只是想阻止该字段超过给定的限制，并能够在限制内复制和粘贴！
@Fernando68 我意识到我没有链接答案 - 这是link to scottyboiler solution which is closest to idea - 其他人都有一些失败。
@kape123 - 领先于你，伙计！ :)

标签： asp.net textbox multiline maxlength

【解决方案1】：

MaxLength现在从 .NET 4.7.2 开始支持，所以只要您将项目升级到 .NET 4.7.2 或更高版本，它就会自动运行。

您可以在发行说明 here 中看到这一点 - 特别是：

使 ASP.NET 开发人员能够为 Multiline asp:TextBox 指定 MaxLength 属性。 [449020，System.Web.dll，错误]

【讨论】：

【解决方案2】：

保持简单。大多数现代浏览器都支持文本区域（包括 IE）的 maxlength 属性，因此只需在代码隐藏中添加该属性。没有 JS，没有 Jquery，没有继承，自定义代码，没有大惊小怪。

VB.Net：

fld_description.attributes("maxlength") = 255

C#

fld_description.Attributes["maxlength"] = 255

【讨论】：

fld_description.attributes["maxlength"] = 255 给出了attributes 的错误
@BarryDoyle 属性是 WebControl 的公共属性。即帕斯卡案例fld_description.Attributes["maxlength"]
这是正确的解决方案 - 因为您正在解决 Web 控件中的错误（限制？）而不是浏览器的限制。我可能会做的唯一修改是我认为属性是字符串，所以“255”而不是 255。
这就是我要找的。谢谢！
这在名为“Comments”的多行文本框中对我有用：Comments.Attributes.Add("maxlength", "1000"); （在 Page_Load 事件中）。

【解决方案3】：

现在几乎所有现代浏览器都支持对 textarea 元素使用 maxlength 属性。(https://caniuse.com/#feat=maxlength)

要在多行文本框中包含 maxlength 属性，您可以简单地修改后面代码中的 Attributes 集合，如下所示：

txtTextBox.Attributes["maxlength"] = "100";

如果您不想使用后面的代码来指定，您可以创建一个从 TextBox 派生的自定义控件：

public class Textarea : TextBox
{
    public override TextBoxMode TextMode
    {
        get { return TextBoxMode.MultiLine; }
        set { }
    }

    protected override void OnPreRender(EventArgs e)
    {
        if (TextMode == TextBoxMode.MultiLine && MaxLength != 0)
        {
            Attributes["maxlength"] = MaxLength.ToString();
        }

        base.OnPreRender(e);
    }
}

【讨论】：

【解决方案4】：

这与@KeithK 的答案相同，但有更多细节。首先，基于TextBox新建一个控件。

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);
        }
    }
}

请注意，上面的代码总是将文本模式设置为多行。

为了使用它，您需要在 aspx 页面上注册它。这是必需的，因为您需要使用 TagPrefix 引用它，否则编译会抱怨自定义通用控件。

<%@ Register Assembly="MyProject" Namespace="MyProject" TagPrefix="mp" %>

<mp:LimitedMultiLineTextBox runat="server" Rows="3" ...

【讨论】：

【解决方案5】：

您可以在 pageLoad Javascript 事件中指定多行文本框的最大长度

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

我已在 pageLoad() Javascript 函数中将 txtInput 多行文本框的最大长度属性设置为 10 个字符

【讨论】：

【解决方案6】：

我们是这样做的（将所有代码保存在一个地方）：

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

以防万一有人在 2018 年仍在使用网络表单..

【讨论】：

【解决方案7】：

使用自定义属性 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>

这将像这样呈现

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

【讨论】：

在 IE 9 或更早版本中不起作用，因此需要与 Alex Angas 的回答中的验证器结合使用。

【解决方案8】：

$("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();
                    }
                }
            }
        });

【讨论】：

【解决方案9】：

这个 sn-p 在我的情况下有效。我正在寻找解决方案并想写这个，以便它可以帮助任何未来的读者。

平均售价

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

Java 脚本

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 在复制/粘贴的情况下，答案确实对我有用。虽然这样做。

【讨论】：

【解决方案10】：

HTML5 发生了变化：

ASPX：

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

C#：

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

呈现的 HTML：

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

Attributes 的元数据：

摘要：获取与控件上的属性不对应的任意属性（仅用于呈现）的集合。

返回：名称和值对的System.Web.UI.AttributeCollection。

【讨论】：

这是一个很好的答案，但您应该删除 !IsPostBack 条件，因为如果有人在 Firebug 的 DOM 中删除它，TextBox 将没有 maxlength 属性。
好点，虽然在我有限的内部使用应用程序中这已经足够了。

【解决方案11】：

使用带有runat="server" 的HTML textarea 在服务器端访问它。与使用 javascript 或 regex 相比，此解决方案的痛苦更少。

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

注意：要访问服务器端的Text 属性，您应该使用txt1.Value 而不是txt1.Text

【讨论】：

【解决方案12】：

我尝试了不同的方法，但每个方法都有一些弱点（即剪切和粘贴或浏览器兼容性）。这是我现在使用的解决方案：

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;
    }
}

在这种情况下，我在按键时调用 multilineTextBoxKeyUp，在按键时调用 multilineTextBoxKeyDown：

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

【讨论】：

【解决方案13】：

JavaScript/Jquery 中的以下示例将执行此操作-

<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); 

          }
     }

【讨论】：

【解决方案14】：

改用正则表达式验证器。这将在使用 JavaScript 的客户端上运行，但在禁用 JavaScript 时也适用（因为长度检查也将在服务器上执行）。

以下示例检查输入的值是否在 0 到 100 个字符之间：

<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>

当然，您可以使用更复杂的正则表达式来更好地满足您的目的。

【讨论】：

我对这个答案的唯一问题是，当用户编辑文本以使其在限制范围内时，消息不会消失，这可能会让用户感到困惑。
如果您要使用此解决方案，我建议您还触发按键验证，这会使消息在用户键入时出现和消失：fczaja.blogspot.co.uk/2009/07/…
你使用[\s\S]而不是更简单的.有什么特别的原因吗？
刚刚发现原因（很难）：. 不匹配换行符，[\s\S] does。
如果您的页面中有 JavaScript，请注意您可能会收到此错误：stackoverflow.com/questions/16660900/…

【解决方案15】：

对于那些在没有 javascript 的情况下支持 textareas (HTML5) 上的 maxlength 的浏览器（Firefox、Chrome、Safari）解决此问题的另一种方法是派生 System.Web.UI.WebControls.TextBox 类的子类并覆盖 Render 方法.然后在被覆盖的方法中，在正常渲染之前添加 maxlength 属性。

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

    base.Render(writer);
}

【讨论】：

你也可以把它变成一个 ControlAdapter 这样你就不需要用继承的文本框替换每个文本框。

【解决方案16】：

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

【讨论】：

它的票数不高，因为它不起作用。它根本没有任何效果，您仍然可以输入 100 多个字符。这使得答案毫无用处 - 因此所有的反对票。
+1 这可能在 HTML 4.01 中不起作用，但在引入 'maxlength' attribute 后它在 HTML 5 中起作用。

【解决方案17】：

自己动手：

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;
}

这样调用：

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

【讨论】：

为什么要重新发明轮子？这比使用内置机制更好吗？（亚历克斯·安加斯的回答）
@NickG 因为“这个轮子”比上面的木制版本旋转得更好！ ;)
我更喜欢这个 JavaScript 解决方案。以上RegularExpressionValidator 可能会发布问题并需要更改 web.config。（回复：stackoverflow.com/questions/16660900/…）

【解决方案18】：

看看this。解决它的唯一方法是您尝试使用javascript。

编辑： 尝试将事件更改为 keypressup。

【讨论】：

【解决方案19】：

试试这个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;
}

在控件上像这样调用它：

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

您也可以只使用 checkSpecialKeys 函数来验证您的 javascript 实现中的输入。

【讨论】：

这很好，只是当用户输入回车时限制失败。回车不会向 javascript 的 value.length 计数添加任何内容，但会影响字符串的整体大小（'\n' 是两个字符）。如果您的服务器限制了字符串大小，那么只要有人使用回车符，您仍然会被截断。
我最后的评论似乎只适用于某些浏览器。 IE 返回一个合适的长度值（包括回车符）。 Webkit 没有。
此代码在服务器端不起作用，这使其成为一个非常糟糕的解决方案。 Alex Angas 的正则表达式验证器是一个更好的解决方案，确实应该是公认的答案......