Вказівка ​​максимальної довжини для багаторядкового текстового поля

Я намагаюся використовувати asp:

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

Я хочу спосіб вказати maxlengthвластивість, але, очевидно, для a 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 полягає в тому, що після написання символів вона не дозволяє видаляти та підставляти будь-який з них, що поведінка не є бажаною.

Чи маєте ви уявлення, що я міг би змінити у наведеному вище коді, щоб уникнути цього чи будь-яких інших способів обійти його?

спробуйте цей 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, але також коли 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>

Звичайно, є більш складні регулярні вирази, якими ви можете краще відповідати своїм цілям.

не ускладнювати. Більшість сучасних браузерів підтримують атрибут maxlength у текстовій області (включаючи IE), тому просто додайте цей атрибут у коді. Ні JS, ні Jquery, ні успадкування, користувацький код, ні суєти, ні muss.

VB.Net:

fld_description.attributes("maxlength") = 255

C #

fld_description.Attributes["maxlength"] = 255

Згорніть свій власний:

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>

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

Короткий зміст: Отримує колекцію довільних атрибутів (лише для візуалізації), які не відповідають властивостям елемента керування.

Повертає: A System.Web.UI.AttributeCollectionпар імен та значень.

Інший спосіб виправити це для тих браузерів (Firefox, Chrome, Safari), які підтримують максимальну довжину текстових областей (HTML5) без javascript, - це отримати підклас класу 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);
}

використовувати користувацький атрибут 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>

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

Використовуйте HTML-текстове поле runat="server"для доступу до нього на стороні сервера. Це рішення має менший біль, ніж використання JavaScript або регулярних виразів.

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

Примітка: Для доступу до Textвластивості на стороні сервера слід використовувати txt1.Valueзамістьtxt1.Text

Я спробував різні підходи, але кожен з них мав деякі слабкі сторони (тобто вирізати та вставити або сумісність із браузером). Це рішення, яке я використовую зараз:

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 + "');");

Погляньте на це . Єдиний спосіб вирішити це за допомогою JavaScript, як ви намагалися.

EDIT: Спробуйте змінити подію на натискання клавіш.

Ось як ми це зробили (весь код зберігається в одному місці):

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

Про всяк випадок, якщо хтось все ще використовує веб-форми у 2018 році.

Наступний приклад у 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); 

          }
     }                  

Цей фрагмент спрацював у моєму випадку. Я шукав рішення і думав написати це, щоб воно могло допомогти будь-якому майбутньому читачеві.

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

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

Ви можете вказати максимальну довжину багаторядкового текстового поля в PageLoad Javascript Event

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

Я встановив властивість максимальної довжини багаторядкового текстового поля txtInput до 10 символів у функції JavaScript JavaScript pageLoad ()

Це те саме, що відповідь @ 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" ...

Майже всі сучасні браузери тепер підтримують використання атрибута maxlength для елементів textarea. (https://caniuse.com/#feat=maxlength)

Щоб включити атрибут maxlength у багаторядковий TextBox, ви можете просто змінити колекцію атрибутів у коді позаду так:

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

MaxLength є в даний час підтримується в .NET 4.7.2, так що до тих пір , як ви відновите свій проект .NET 4.7.2 або вище, вона буде працювати в автоматичному режимі.

Ви можете побачити це в примітках до випуску тут - зокрема:

Дозвольте розробникам ASP.NET вказати атрибут MaxLength для багаторядкової asp: TextBox. [449020, System.Web.dll, помилка]