指定多行文本框的最大长度

78

我正在尝试使用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函数正常工作，但问题在于，在编写字符后，不允许您删除和替换其中的任何字符，这是不希望有的行为。

您是否知道我可以在上述代码中进行哪些更改以避免这种情况或其他任何解决方法？

asp.net  textbox  multiline  maxlength 
— 贝勒塔
source
1
尝试所有答案，scottyboiler的答案绝对是接近理想解决方案的方法。所有其他问题都有小问题（不适用于复制粘贴，MaxLength参数不适用于IE等）。
— nikib3ro 2012年
我第二个@ kape123在这里。所有其他人都有失败。毕竟，我们只想阻止该字段超出给定的限制，并能够在该限制内进行复制和粘贴！
— Fandango68年
1
@ Fernando68我意识到我还没有链接答案-这里是最接近想法的scottyboiler解决方案的链接-其他每个人都有一些失败之处。
— nikib3ro 16/09/26
@ kape123-队友遥遥领先！:)
— Fandango68年

Answers:

42

试试这个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实现上的输入。

— 劳尔罗阿
source
1
这很好，除了在用户输入回车符时限制失败之外。回车不会在javascript的value.length计数中添加任何内容，但会影响字符串的整体大小（'\ n'是两个字符）。如果您的服务器限制了字符串大小，那么只要有人使用回车符，您仍然会被截断。
— srmark 2010年
我的最后评论似乎只适用于某些浏览器。IE返回正确的长度值（包括回车符）。Webkit没有。
— srmark 2010年
2
该代码在服务器端不起作用，这使其成为一个很差的解决方案。来自Alex Angas的正则表达式验证器是一个更好的解决方案，实际上应该是公认的答案……
— 乔治
73

请改用正则表达式验证器。这将在使用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>

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

— 亚历克斯·安加斯（Alex Angas）
source
2
编辑帖子时愚蠢的6个字符限制不能让我修复正则表达式和错误消息中的不匹配-必须有“请输入最多100个字符”
— Vladislav 2012年
1
我对这个答案的唯一问题是，当用户编辑文本以使其超出限制时，该消息不会消失，这会使用户感到困惑。
— Liam Spencer
如果你打算为这个解决方案，我建议也触发按键确认，这使得消息出现和消失的用户类型：fczaja.blogspot.co.uk/2009/07/...
— 菲奥娜- myaccessible.website
有什么特别的原因为什么要使用您[\s\S]而不是更简单的方法.？
— Heinzi
1
刚发现为什么（艰难地）：.不匹配换行符，[\s\S]确实。
— Heinzi
27

把事情简单化。大多数现代浏览器在文本区域（包括IE）上都支持maxlength属性，因此只需在代码后面添加该属性即可。没有JS，没有Jquery，没有继承，自定义代码，没有大惊小怪，没有头脑。

VB.Net：

fld_description.attributes("maxlength") = 255

C＃

fld_description.Attributes["maxlength"] = 255
— 迈克·A
source
1
fld_description.attributes["maxlength"] = 255给出了一个错误attributes
— Barry Michael Doyle
@BarryDoyle属性是WebControl的公共属性。即帕斯卡案例fld_description.Attributes["maxlength"]
— Chronozoa
2
这是正确的解决方案-因为您是在解决Web控件中的错误（限制？），而不是浏览器的限制。我可能会做的唯一修改是，我认为属性是字符串，这样“255”不是255
— 布赖恩·克莱尔
这就是我想要的。谢谢！
— 史蒂夫（Steve）
这在名为“ Comments”的多行文本框中为我工作：Comments.Attributes.Add（“ maxlength”，“ 1000”）; （在Page_Load事件中）。
— James Carr
22

自己动手：

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>
— 锅炉
source
9
剪切并粘贴！
— user467384
为什么要重新发明轮子？这比使用内置机制好吗？（亚历克斯·
— 安加斯
3
@NickG因为“这个轮子”比上面的木制版本旋转得更好！;）
— Fandango68年
我更喜欢这个JavaScript解决方案。以上内容RegularExpressionValidator可能会引发问题，并需要更改web.config。（Re：stackoverflow.com/questions/16660900/…）
— user3454439
5

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名称和值对的A。

— 克里斯托弗
source
这是一个很好的答案，但是您应该删除！IsPostBack条件，因为如果有人在Fi​​rebug中的DOM中将其删除，则TextBox将不具有maxlength属性。
— krlzlx
好点，尽管在我有限的内部使用应用程序中，这已经足够了。
— 克里斯托弗
4

针对那些在不使用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);
}
— 基思·K
source
1
您也可以通过这种方式将其变成ControlAdapter，而无需用继承的文本框替换每个TextBox。
— 彼得
4

使用自定义属性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>
— 阿什维尼·金达尔（Ashwini Jindal）
source
在IE 9或更早版本中不起作用，因此需要与Alex Angas的答案中的验证器结合使用。
— NickG 2014年
3 
$('#txtInput').attr('maxLength', 100);
— 玛利诺犬
source
由于无效，它的票数不佳。它根本没有任何作用，您仍然可以输入100个以上的字符。这使答案毫无用处-因此，所有的否决票。
— NickG 2014年
2
+1这可能在HTML 4.01中不起作用，但是通过引入'maxlength'属性在HTML 5中起作用。
— Charles Caldwell
3

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

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

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

— 阿里·贡纳巴迪（Ali Gonabadi）
source
2

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

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 + "');");
— 苏·毛里齐奥（Sue Maurizio）
source
1

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

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

— 基督徒13467
source
1

这是我们的操作方法（将所有代码保留在一个地方）：

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

以防万一有人在2018年仍在使用Webforms。

— 亚历克斯
source
0

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

          }
     }

— 南德·基绍·库马尔
source
0

在我的情况下，此代码段有效。我一直在寻找解决方案，并想写这篇文章，以便对将来的读者有所帮助。

均价

<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úlRoa Answer在复制/粘贴的情况下对我有用。虽然这样做。

— 阿夫南·艾哈迈德（Afnan Ahmad）
source
0 
$("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();
                    }
                }
            }
        });
— 亚历克斯
source
0

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

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

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

— 苏米·贾巴尔（Sumit Jambhale）
source
0

这与@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);
        }
    }
}

请注意，上面的代码始终将textmode设置为multiline。

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

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

<mp:LimitedMultiLineTextBox runat="server" Rows="3" ...
— 伯恩斯
source
0

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

要将maxlength属性包含在多行TextBox上，只需在后面的代码中修改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);
    }
}
— 丹尼尔·阿兰特
source
0

MaxLength 是现在支持为.NET 4.7.2的，所以只要你的项目升级到4.7.2 .NET或以上，它会自动工作。

您可以在此处的发行说明中看到它-特别是：

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

— 帕特梅斯特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.