指定多行文本框的maxlength

时间:2009-08-26 12:18:55

标签: asp.net textbox multiline maxlength

我正在尝试使用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函数的问题在于,在写入字符后,它不允许您删除和替换它们中的任何一个,这种行为是不可取的。

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

19 个答案:

答案 0 :(得分: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>

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

答案 1 :(得分:40)

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

答案 2 :(得分:23)

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

VB.Net:

fld_description.attributes("maxlength") = 255

C#

fld_description.attributes["maxlength"] = 255

答案 3 :(得分:21)

滚动你自己:

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>

答案 4 :(得分: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);
}

答案 5 :(得分:4)

使用自定义属性maxsize =&#34; 100&#34;

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

答案 6 :(得分:3)

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

答案 7 :(得分:2)

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

答案 8 :(得分: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;
    }
}

在这种情况下,我在key up上调用multilineTextBoxKeyUp,在key down调用multilineTextBoxKeyDown:

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

答案 9 :(得分:1)

看看this。解决问题的唯一方法是通过javascript尝试。

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

答案 10 :(得分:1)

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

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

注意:要访问服务器端的Text属性,您应该使用txt1.Value代替txt1.Text

答案 11 :(得分: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); 

          }
     }                  

答案 12 :(得分:0)

这个片段在我的案例中有用。我正在寻找解决方案,并考虑写这个,以便它可以帮助任何未来的读者。

<强> ASP

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

答案 13 :(得分: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();
                    }
                }
            }
        });

答案 14 :(得分:0)

这是我们的操作方式(将所有代码保留在一个地方):

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

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

答案 15 :(得分:0)

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

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

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

答案 16 :(得分: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设置为多行。

要使用此功能,您需要在aspx页面上进行注册。这是必需的,因为您需要使用TagPrefix来引用它,否则编译将抱怨自定义通用控件。

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

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

答案 17 :(得分:0)

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

要在多行TextBox上包含maxlength属性,您可以像下面这样简单地在后面的代码中修改Attributes集合:

object:modified

如果您不想使用后面的代码来指定它,则只需创建一个从TextBox派生的自定义控件即可:

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

答案 18 :(得分:0)

从.NET 4.7.2开始支持

MaxLength ,因此,只要将项目升级到.NET 4.7.2或更高版本,它将自动运行。

您可以在发行说明here中看到-特别是:

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