Festlegen der maximalen Länge für ein mehrzeiliges Textfeld

78

Ich versuche asp zu verwenden:

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

Ich möchte eine Möglichkeit, die maxlengthEigenschaft anzugeben , aber anscheinend ist für a keine Möglichkeit möglich multiline textbox. Ich habe versucht, JavaScript für das onkeypressEreignis zu verwenden:

onkeypress="return textboxMultilineMaxNumber(this,maxlength)"

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

Das Problem mit dieser JavaScript-Funktion besteht darin, dass Sie nach dem Schreiben von Zeichen keine dieser Zeichen löschen und ersetzen können. Dieses Verhalten ist jedoch nicht erwünscht.

Haben Sie eine Idee, was ich möglicherweise im obigen Code ändern könnte, um dies oder andere Möglichkeiten zu vermeiden, um es zu umgehen?

Blerta
quelle
1
Versucht alle Antworten und Antworten von Scottyboiler ist definitiv der Abschluss der idealen Lösung. Alle anderen haben kleine Probleme (funktionieren nicht mit Copy-Paste, MaxLength-Parameter funktioniert nicht im IE usw.).
Nikib3ro
Ich zweite @ kape123 hier. Alle anderen haben Fehler. Schließlich wollen wir nur verhindern, dass das Feld mehr als das angegebene Limit zulässt, und innerhalb des Limits kopieren und einfügen können!
Fandango68
1
@ Fernando68 Ich habe festgestellt, dass ich die Antwort nicht verlinkt habe - hier ist der Link zur Scottyboiler-Lösung, die der Idee am nächsten kommt - alle anderen haben einige Fehler.
Nikib3ro
@ kape123 - weit vor dir Kumpel! :)
Fandango68

Antworten:

42

Versuchen Sie dieses 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;
}

Rufen Sie auf dem Steuerelement Folgendes auf:

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

Sie können auch einfach die Funktion checkSpecialKeys verwenden, um die Eingabe in Ihre Javascript-Implementierung zu überprüfen.

Raúl Roa
quelle
1
Dies ist großartig, außer dass die Begrenzung fehlschlägt, wenn der Benutzer Wagenrückläufe eingibt. Wagenrückläufe fügen dem Wert von javascript nichts hinzu. Länge, tragen jedoch zur Gesamtgröße der Zeichenfolge bei ('\ n' besteht aus zwei Zeichen). Wenn Ihr Server die Zeichenfolgengröße begrenzt, werden Sie immer noch abgeschnitten, wenn jemand Wagenrücklauf verwendet.
srmark
Mein letzter Kommentar scheint nur für bestimmte Browser zu gelten. IE gibt einen korrekten Längenwert zurück (einschließlich Wagenrücklaufzeichen). Webkit nicht.
srmark
2
Dieser Code funktioniert nicht serverseitig, was ihn zu einer ziemlich schlechten Lösung macht. Der Regex-Validator von Alex Angas ist eine viel bessere Lösung und sollte wirklich die akzeptierte Antwort sein ...
George
73

Verwenden Sie stattdessen einen Validator für reguläre Ausdrücke . Dies funktioniert auf der Clientseite mit JavaScript, aber auch, wenn JavaScript deaktiviert ist (da die Längenprüfung auch auf dem Server durchgeführt wird).

Im folgenden Beispiel wird überprüft, ob der eingegebene Wert zwischen 0 und 100 Zeichen lang ist:

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

Es gibt natürlich komplexere Regexs, die Sie verwenden können, um Ihren Zwecken besser zu entsprechen.

Alex Angas
quelle
2
Eine alberne Beschränkung auf 6 Zeichen beim Bearbeiten des Beitrags kann es mir nicht erlauben, eine Nichtübereinstimmung in Regex und Fehlermeldung zu beheben. Es muss "Bitte geben Sie maximal 100 Zeichen ein"
Vladislav
1
Das einzige Problem, das ich mit dieser Antwort habe, ist, dass die Nachricht nicht verschwindet, wenn der Benutzer den Text bearbeitet, um ihn innerhalb des Grenzwerts zu halten, was für den Benutzer ziemlich verwirrend sein kann.
Liam Spencer
Wenn Sie sich für diese Lösung entscheiden, empfehle ich, die Validierung auch beim Tastendruck auszulösen, wodurch die Meldung angezeigt
eingibt
Gibt es einen bestimmten Grund, warum Sie [\s\S]anstelle des einfacheren verwenden .?
Heinzi
1
Gerade entdeckt warum (auf die harte .Tour ): passt nicht zu Zeilenumbrüchen, [\s\S]tut .
Heinzi
27

halte es einfach. Die meisten modernen Browser unterstützen ein Attribut für die maximale Länge in einem Textbereich (einschließlich IE). Fügen Sie dieses Attribut einfach in CodeBehind hinzu. Kein JS, kein Jquery, keine Vererbung, kein benutzerdefinierter Code, keine Aufregung, kein Muss.

VB.Net:

fld_description.attributes("maxlength") = 255

C #

fld_description.Attributes["maxlength"] = 255
Mike A.
quelle
1
fld_description.attributes["maxlength"] = 255gibt einen Fehler fürattributes
Barry Michael Doyle
@BarryDoyle Attributes ist eine öffentliche Eigenschaft von WebControl. dh Pascal Fallfld_description.Attributes["maxlength"]
Chronozoa
2
Dies ist die richtige Lösung - da Sie einen Fehler (Einschränkung?) In der Websteuerung umgehen, keine Einschränkung des Browsers. Die einzige Änderung, die ich vornehmen könnte, ist, dass ich denke, dass Attribute Zeichenfolgen sind, also "255" nicht 255.
Brian Cryer
Das habe ich gesucht. Vielen Dank!
Steve
Dies funktionierte für mich in einem mehrzeiligen Textfeld mit dem Namen "Kommentare": Comments.Attributes.Add ("maxlength", "1000"); (Im PageLoad-Ereignis).
James Carr
22

Roll deinen eigenen:

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

Rufen Sie so an:

<asp:TextBox ID="foo" runat="server" Rows="3" TextMode="MultiLine" onKeyUp="javascript:Count(this);" onChange="javascript:Count(this);" ></asp:TextBox>
Scottyboiler
quelle
9
Griffe ausschneiden und einfügen!
user467384
Warum das Rad neu erfinden? Wie ist das besser als der eingebaute Mechanismus? (Alex Angas Antwort)
NickG
3
@ NickG Weil 'dieses Rad' besser dreht als die Holzversionen oben! ;)
Fandango68
Ich bevorzuge diese JavaScript-Lösung. Die oben genannten RegularExpressionValidatorProbleme können auftreten und erfordern eine Änderung von web.config. (Re: stackoverflow.com/questions/16660900/… )
user3454439
5

In HTML5 haben sich die Dinge geändert:

ASPX:

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

C #:

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

Gerendertes HTML:

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

Die Metadaten für Attributes:

Zusammenfassung: Ruft die Sammlung beliebiger Attribute ab (nur zum Rendern), die nicht den Eigenschaften des Steuerelements entsprechen.

Rückgabe: A System.Web.UI.AttributeCollectionvon Namens- und Wertepaaren.

Kristopher
quelle
Das ist eine gute Antwort, aber Sie sollten die Bedingung! IsPostBack entfernen, da die TextBox nicht über die Eigenschaft maxlength verfügt, wenn jemand sie beispielsweise im DOM in Firebug entfernt.
krlzlx
Guter Punkt, obwohl dies in meiner eingeschränkten Anwendung für den internen Gebrauch ausreichend war.
Kristopher
4

Eine andere Möglichkeit, dies für Browser (Firefox, Chrome, Safari) zu beheben, die die maximale Länge von Textbereichen (HTML5) ohne Javascript unterstützen, besteht darin, eine Unterklasse der System.Web.UI.WebControls.TextBox-Klasse abzuleiten und die Render-Methode zu überschreiben. Fügen Sie dann in der überschriebenen Methode das Attribut maxlength hinzu, bevor Sie wie gewohnt rendern.

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

    base.Render(writer);
}
Keith K.
quelle
1
Sie können dies auch in einen ControlAdapter verwandeln, sodass Sie nicht jede TextBox durch das geerbte Textfeld ersetzen müssen.
Peter
4

Verwenden Sie das benutzerdefinierte Attribut 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>

Dies wird so gerendert

<textarea name="ctl00$BodyContentPlac
eHolder$txtAddress" rows="4" cols="17" id="txtAddress" maxlength="100"></textarea>
Ashwini Jindal
quelle
Funktioniert nicht in IE 9 oder früheren Versionen und muss daher wie in Alex Angas 'Antwort mit einem Validator kombiniert werden.
NickG
3
$('#txtInput').attr('maxLength', 100);
Malinois
quelle
Es hat Abstimmungen, da es nicht funktioniert. Es hat überhaupt keine Wirkung und Sie können immer noch mehr als 100 Zeichen eingeben. Das macht die Antwort nutzlos - daher alle Abstimmungen.
NickG
2
+1 Dies hat möglicherweise nicht in HTML 4.01 funktioniert, aber es funktioniert in HTML 5 mit der Einführung des Attributs 'maxlength' .
Charles Caldwell
3

Verwenden Sie HTML-Textbereich mit, runat="server"um auf der Serverseite darauf zuzugreifen. Diese Lösung hat weniger Schmerzen als die Verwendung von Javascript oder Regex.

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

Hinweis: Um auf die TextEigenschaft auf der Serverseite zuzugreifen , sollten Sie txt1.Valueanstelle von verwendentxt1.Text

Ali Gonabadi
quelle
2

Ich habe verschiedene Ansätze ausprobiert, aber jeder hatte einige Schwachstellen (dh beim Ausschneiden und Einfügen oder bei der Browserkompatibilität). Dies ist die Lösung, die ich gerade verwende:

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

In diesem Fall rufe ich multilineTextBoxKeyUp bei aktivierter Taste und multilineTextBoxKeyDown bei gedrücktem Schlüssel auf:

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

Werfen Sie einen Blick auf diese . Die einzige Möglichkeit, dies zu lösen, ist Javascript, wie Sie es versucht haben.

BEARBEITEN: Versuchen Sie, das Ereignis in Tastendruck zu ändern.

Christian13467
quelle
1

So haben wir es gemacht (hält den gesamten Code an einem Ort):

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

Nur für den Fall, dass jemand 2018 noch Webformulare verwendet.

Alex
quelle
0

Das folgende Beispiel in JavaScript / Jquery macht das-

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

          }
     }                  

Nand Kishor Kumar
quelle
0

Dieses Snippet hat in meinem Fall funktioniert. Ich suchte nach der Lösung und dachte daran, diese zu schreiben, damit sie jedem zukünftigen Leser helfen kann.

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 Answer hat bei mir beim Kopieren / Einfügen funktioniert. während dies tut.

Afnan Ahmad
quelle
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();
                    }
                }
            }
        });
Alex
quelle
0

Sie können die maximale Länge für das mehrzeilige Textfeld in pageLoad Javascript Event angeben

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

Ich habe die maximale Länge Eigenschaft gesetzt TxtInput mehrzeiliges Textfeld auf 10 Zeichen in pageload () JavaScript - Funktion

Sumit Jambhale
quelle
0

Dies ist die gleiche Antwort wie bei @ KeithK, jedoch mit einigen weiteren Details. Erstellen Sie zunächst ein neues Steuerelement basierend auf 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);
        }
    }
}  

Beachten Sie, dass der obige Code den Textmodus immer auf mehrzeilig setzt.

Um dies nutzen zu können, müssen Sie es auf der aspx-Seite registrieren. Dies ist erforderlich, da Sie mit TagPrefix darauf verweisen müssen. Andernfalls wird die Kompilierung über benutzerdefinierte generische Steuerelemente beschwert.

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

<mp:LimitedMultiLineTextBox runat="server" Rows="3" ...
BurnsBA
quelle
0

Nahezu alle modernen Browser unterstützen jetzt die Verwendung des Attributs maxlength für Textbereichselemente. (https://caniuse.com/#feat=maxlength)

Um das Attribut maxlength in eine mehrzeilige TextBox aufzunehmen, können Sie die Attributes-Auflistung im Code dahinter wie folgt ändern:

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

Wenn Sie den Code dahinter nicht verwenden müssen, um dies anzugeben, können Sie einfach ein benutzerdefiniertes Steuerelement erstellen, das von TextBox abgeleitet ist:

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);
    }
}
Daniel Arant
quelle
0

MaxLength wird jetzt ab .NET 4.7.2 unterstützt. Solange Sie Ihr Projekt auf .NET 4.7.2 oder höher aktualisieren, funktioniert es automatisch.

Sie können dies in den Versionshinweisen hier sehen - speziell:

Ermöglichen Sie ASP.NET-Entwicklern, das MaxLength-Attribut für Multiline asp: TextBox anzugeben. [449020, System.Web.dll, Bug]

pattermeister
quelle