Указание maxlength для многострочного текстового поля

Я пытаюсь использовать asp:

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

Я хочу способ указать maxlength свойство, но, по-видимому, нет возможности для multiline textbox. Я пытался использовать JavaScript для onkeypress событие: 

onkeypress="return textboxMultilineMaxNumber(this,maxlength)"

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

при нормальной работе проблема с этой функцией JavaScript заключается в том, что после написания символов она не позволяет удалять и заменять любой из них, это поведение нежелательно.

у вас есть идеи, что я мог бы возможно, изменить приведенный выше код, чтобы избежать этого или каких-либо других способов обойти его?

69
asp.net maxlength multiline textbox

16 ответов

попробуйте этот 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.

40

использовать валидатор регулярных выражений. Это будет работать на стороне клиента с помощью 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>

есть, конечно, более сложные регулярные выражения, которые вы можете использовать, чтобы лучше соответствовать вашим целям.

72

свернуть свой собственный:

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

сохранить его простым. Большинство современных браузеров поддерживают атрибут maxlength в текстовой области (т. е. включены), поэтому просто добавьте этот атрибут в коде. Ни JS, ни Jquery, ни наследования, ни пользовательского кода, ни суеты, ни Мусса.

VB.Net:

fld_description.attributes("maxlength") = 255

C#

fld_description.attributes["maxlength"] = 255
17

использовать пользовательский атрибут 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>
4

другой способ исправить это для тех браузеров (Firefox, Chrome, Safari), которые поддерживают maxlength на textareas (HTML5) без javascript, - это получить подкласс системы.Сеть.ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС.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);
}
3
$('#txtInput').attr('maxLength', 100);
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 на key up и multilineTextBoxKeyDown на key down:

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

посмотреть этой. Единственный способ решить это-javascript, как вы пытались.

EDIT: Попробуйте изменить событие на keypressup.

1

используйте HTML textarea с runat="server" для доступа к нему на стороне сервера. Это решение имеет меньше боли, чем использование javascript или regex.

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

Примечание:Text собственность на стороне сервера, вы должны использовать txt1.Value вместо txt1.Text

1

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

Summary: возвращает коллекцию произвольных атрибутов (только для отрисовки), которые не соответствуют свойствам элемента управления.

Возвращает: A System.Web.UI.AttributeCollection пар имя и значение.

1

следующий пример в 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); 

          }
     }

0

этот фрагмент работал в моем случае. Я искал решение и думал написать это, чтобы это могло помочь любому будущему читателю.

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 ответ действительно работал для меня в случае копирования / вставки. пока это делает.

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

вот как мы это сделали (держит весь код в одном месте):

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

на всякий случай, если кто-то все еще использует webforms в 2018 году..

0

вы можете указать максимальную длину многострочного текстового поля в Pageload Javascript Event

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

Я установил свойство max length txtInput многострочное текстовое поле до 10 символов в функции Pageload () Javascript

0