So legen Sie textArea in HTML mithilfe von JavaScript eine maximale Länge fest

116

Ich hätte gerne eine Funktionalität, mit der ich schreiben kann

<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>

Die maximale Länge wird der textArea automatisch auferlegt. Wenn möglich, geben Sie die Lösung bitte nicht in jQuery an.

Hinweis: Dies kann gemacht werden, wenn ich so etwas mache:

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">

function imposeMaxLength(Event, Object, MaxLen)
{
    return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}

Kopiert von Was ist der beste Weg, um ein HTML-Eingabeattribut "maxlength" in einem HTML-Textbereich zu emulieren?

Aber der Punkt ist, dass ich nicht jedes Mal, wenn ich eine textArea deklariere, aufKeyPress und onKeyUp schreiben möchte.

javascript html textarea Rakesh Juyal
quelle

4

maxlenth für textareas ist in html5. Im Moment funktioniert es in Chrome, aber nicht in Firefox.

Dave

113

window.onload = function() { 
  var txts = document.getElementsByTagName('TEXTAREA'); 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert('Maximum length exceeded: ' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  };

}

Josh Stodola
quelle

3

Josh, es scheint, als würde es funktionieren, aber erklären Sie bitte, was dieses Ding tun wird --- if (/ ^ [0-9] + $ /. Test (txts [i] .getAttribute ("maxlength")) {- -

Rakesh Juyal

2

Ich denke, ich erinnere mich, was der Deal ist: Entweder FF oder IE (ich denke, es ist FF) gibt eine andere Zeichenfolge zurück, wenn Javascript das Attribut "value" überprüft, als das, was es beim Versenden des Formulars an den Server zurücksendet! Es hat etwas damit zu tun, wie harte Zeilenumbrüche ein Wagenrücklaufzeichen einfügen / nicht einfügen. Mit etwas Debug-Code auf Client- und Serverseite ist es einfach herauszufinden.

Pointy

7

Ich habe die Reihenfolge der Warnung geändert und den Wert abgeschnitten - in der ursprünglichen Reihenfolge hat der Onkeyup-Alarm ausgelöst, wodurch das Steuerelement den Fokus verliert und die Unschärfe ausgelöst wird, da das Feld noch nicht abgeschnitten wurde.

GalacticCowboy

1

@JoshStodola - onblurbehandelt das Einfügen erst, wenn der Benutzer aus dem Textbereich klickt. onkeyupwird das Einfügen nicht verarbeiten, wenn es über ein Kontextmenü oder ein Browsermenü erfolgt. Dieser Ansatz funktioniert, wenn Sie nicht nach Einfügen suchen müssen. Siehe diese Antwort für einen zeitgeberbasierten

Travis J

3

@ JoshStodola - In der Tat können Sie nicht. Es würde mich als Benutzer wirklich ärgern, wenn ich ein ganzes Stück von etwas in einen Textbereich eingefügt, auf Senden geklickt und nur einen kleinen Teil davon ohne Antwort durchlaufen hätte.

Travis J

80

Ich weiß, dass Sie jQuery vermeiden möchten, aber da die Lösung JavaScript erfordert, ist diese Lösung (mit jQuery 1.4) die konsequenteste und robusteste.

Inspiriert von, aber eine Verbesserung gegenüber Dana Woodmans Antwort:

Änderungen gegenüber dieser Antwort sind: Vereinfacht und allgemeiner, mit jQuery.live und ohne Festlegen von val, wenn die Länge in Ordnung ist (führt zu funktionierenden Pfeiltasten im IE und zu einer spürbaren Beschleunigung im IE):

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').live('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

BEARBEITEN: Aktualisierte Version für jQuery 1.7+ mit onanstelle vonlive

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

Eirik W.
quelle

1

Netter Eirik, wie die Verwendung von Live (vergessen!).

Dana Woodman

5

Ich habe Fehler in live () gefunden und jQuery hat sie seitdem abgelehnt. Verwenden Sie stattdessen on (). Wenn Sie sich interessieren, warum: britishdeveloper.co.uk/2012/04/…

BritishDeveloper

6

Aber wenn sie in der Mitte bearbeitet werden, wird dies den letzten Charakter töten, nicht den neuen Charakter, oder?

Joe Mabel

6

Yep verwendet auf () und es funktioniert wie ein Edelstein. Vielen Dank. Hier ist eine modifizierte und optimierte Geige: jsfiddle.net/nXMqc

B-Money

6

Das Problem beim Schneiden ist, dass wenn Sie Zeichen in die Mitte eingeben, diese eingefügt werden und die Zeichenfolge vom Ende abgeschnitten wird. Wenn nicht der gesamte Text auf einmal sichtbar ist, kann dies verwirrend sein. Auch die Verwendung der Funktion val (..) zum Ändern des Werts scheint den Cursor an das Ende der Zeichenfolge zu bewegen. (Wenn Sie diese mit einem modernen Browser in Fiddle testen möchten, müssen Sie das Attribut maxlength entfernen. Andernfalls erzwingt der Browser das Limit.)

Juha Palomäki

33

Update Verwenden Sie .live()stattdessen die Lösung von Eirik, da diese etwas robuster ist.

Obwohl Sie eine Lösung wollten, die jQuery nicht verwendet, dachte ich, ich würde eine hinzufügen, wenn jemand diese Seite über Google findet und nach einer jQuery-ähnlichen Lösung sucht:

$(function() {        
    // Get all textareas that have a "maxlength" property.
    $('textarea[maxlength]').each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field.
        var maxlength = $textarea.attr('maxlength');
        var val = $textarea.val();

        // Trim the field if it has content over the maxlength.
        $textarea.val(val.slice(0, maxlength));

        // Bind the trimming behavior to the "keyup" event.
        $textarea.bind('keyup', function() {
            $textarea.val($textarea.val().slice(0, maxlength));
        });

    });
});

Hoffe das ist nützlich für euch Googler da draußen ...

Dana Woodman
quelle

1

Die keyup-gebundene Funktion sollte lauten: $ (this) .val ($ (this) .val (). Slice (0, maxlength));

Brian Vallelunga

@brian Yup, du bist richtig. Danke, dass du meinen Fehler entdeckt hast, behoben!

Dana Woodman

$ (this) .val (Funktion (i, val) {return val.slice (0, maxlength)});

Dima Bildin

Dieses Snippet ist immer noch hilfreich, da

Zeilenvorschübe

32

HTML5 fügt maxlengthdem textareaElement ein Attribut hinzu , wie folgt:

<!DOCTYPE html>
<html>
    <body>
        <form action="processForm.php" action="post">
            <label for="story">Tell me your story:</label><br>
            <textarea id="story" maxlength="100"></textarea>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

Dies wird derzeit in Chrome 13, FF 5 und Safari 5 unterstützt. Es überrascht nicht, dass dies in IE 9 nicht unterstützt wird. (Getestet unter Win 7)

james.garriss
quelle

5

Diese Lösung vermeidet das Problem im IE, bei dem das letzte Zeichen entfernt wird, wenn ein Zeichen in der Mitte des Textes hinzugefügt wird. Es funktioniert auch gut mit anderen Browsern.

$("textarea[maxlength]").keydown( function(e) {
    var key = e.which;  // backspace = 8, delete = 46, arrows = 37,38,39,40

    if ( ( key >= 37 && key <= 40 ) || key == 8 || key == 46 ) return;

    return $(this).val().length < $(this).attr( "maxlength" );
});

Meine Formularüberprüfung befasst sich dann mit allen Problemen, bei denen der Benutzer möglicherweise Text eingefügt hat (der im IE nur ein Problem zu sein scheint), der die maximale Länge des Textbereichs überschreitet.

Chris R.
quelle

4

Dies ist ein optimierter Code, den ich gerade auf meiner Website verwendet habe. Es wurde verbessert, dem Benutzer die Anzahl der verbleibenden Zeichen anzuzeigen.

(Entschuldigen Sie noch einmal OP, der keine jQuery angefordert hat. Aber im Ernst, wer verwendet jQuery heutzutage nicht?)

$(function() {
    // Get all textareas that have a "maxlength" property.
    $("textarea[maxlength]").each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field
        var maxlength = $textarea.attr("maxlength");

        // Add a DIV to display remaining characters to user
        $textarea.after($("<div>").addClass("charsRemaining"));

        // Bind the trimming behavior to the "keyup" & "blur" events (to handle mouse-based paste)
        $textarea.on("keyup blur", function(event) {
            // Fix OS-specific line-returns to do an accurate count
            var val = $textarea.val().replace(/\r\n|\r|\n/g, "\r\n").slice(0, maxlength);
            $textarea.val(val);
            // Display updated count to user
            $textarea.next(".charsRemaining").html(maxlength - val.length + " characters remaining");
        }).trigger("blur");

    });
});

Wurde NICHT mit internationalen Multi-Byte-Zeichen getestet, daher bin ich mir nicht sicher, wie es genau mit diesen funktioniert.

Simon East
quelle

2

Fügen Sie außerdem das folgende Ereignis hinzu, um das Einfügen in den Textbereich zu behandeln:

...

txts[i].onkeyup = function() {
  ...
}

txts[i].paste = function() {
  var len = parseInt(this.getAttribute("maxlength"), 10);

  if (this.value.length + window.clipboardData.getData("Text").length > len) {
    alert('Maximum length exceeded: ' + len);
    this.value = this.value.substr(0, len);
    return false;
  }
}

...

stusherwin
quelle

Könnte jemand dies dem Antworttext hinzufügen, wenn er denkt, dass es in Ordnung ist? Ich habe noch nicht genug Punkte, um das zu tun.

Stusherwin

Die Einfügefunktion ist nicht standardisiert. Ich glaube, es funktioniert nur im IE.

Josh Stodola

Ich habe meine Antwort aktualisiert, um die Einfügesituation zu bewältigen. Danke dir!

Josh Stodola

2

Das Attribut maxlength wird in Internet Explorer 10, Firefox, Chrome und Safari unterstützt.

Hinweis: Das Attribut maxlength des <textarea>Tags wird in Internet Explorer 9 und früheren Versionen oder in Opera nicht unterstützt.

aus HTML maxlength Attribut w3schools.com

Für IE8 oder frühere Versionen müssen Sie Folgendes verwenden

//only call this function in IE
function maxLengthLimit($textarea){
    var maxlength = parseInt($textarea.attr("maxlength"));
    //in IE7,maxlength attribute can't be got,I don't know why...
    if($.browser.version=="7.0"){
        maxlength = parseInt($textarea.attr("length"));
    }
    $textarea.bind("keyup blur",function(){
        if(this.value.length>maxlength){
            this.value=this.value.substr(0,maxlength);
        }
    });
}

PS

Das Attribut maxlength des <input>Tags wird in allen gängigen Browsern unterstützt.

aus HTML maxlength Attribut w3schools.com

Eason
quelle

1

Bessere Lösung im Vergleich zum Trimmen des Werts des Textbereichs.

$('textarea[maxlength]').live('keypress', function(e) {
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    if (val.length > maxlength) {
        return false;
    }
});

Bharat
quelle

1

Sie können jQuery verwenden, um es einfach und klar zu machen

JSFiddle DEMO

<textarea id="ta" max="10"></textarea>

<script>
$("#ta").keypress(function(e){

    var k = e.which==0 ? e.keyCode : e.which;
    //alert(k);
    if(k==8 || k==37 || k==39 || k==46) return true;

    var text      = $(this).val();
    var maxlength = $(this).attr("max");

    if(text.length >= maxlength) {
        return false;   
    }
    return true;
});
</script>

Es wird geprüft , in Firefox, Google ChromeundOpera

MaxEcho
quelle

Ich befürchte, dass der Handler, wenn er ausgeführt textwird, mit dem "Wert" des Texareas gefüllt wird, bevor er aktualisiert wurde. Dies bedeutet, dass Ihr Test sein sollte if( text.length +1 > maxlength) {return false;}. Andernfalls könnte man nur maxlength - 1Zeichen :/

hineinstecken

Mit Ihrer Geige kann der Benutzer ein weiteres Zeichen eingeben. IMO, Ihr Test sollte entweder sein if(text.length+1 > maxlength)oder if(text.length >= maxlength)...

Stphane

Es funktioniert nicht wie erwartet, wenn ich den Inhalt kopiere und einfüge

Ranjit Kumar

0

Ein kleines Problem mit dem obigen Code ist, dass val () kein change () -Ereignis auslöst. Wenn Sie also backbone.js (oder ein anderes Framework für die Modellbindung) verwenden, wird das Modell nicht aktualisiert.

Ich poste, dass die Lösung für mich großartig funktioniert hat.

$(function () {

    $(document).on('keyup', '.ie8 textarea[maxlength], .ie9 textarea[maxlength]', function (e) {
        var maxLength = $(this).attr('maxlength');
        if (e.keyCode > 47 && $(this).val().length >= maxLength) {
            $(this).val($(this).val().substring(0, maxLength)).trigger('change');
        }
        return true;
    });

});

Alexander Beletsky
quelle

0

Ich habe kürzlich ein maxlengthVerhalten implementiert textareaund bin auf das in dieser Frage beschriebene Problem gestoßen : Chrome zählt Zeichen, die im Textbereich mit dem Attribut maxlength falsch sind .

Alle hier aufgeführten Implementierungen funktionieren also nur geringfügig fehlerhaft. Um dieses Problem zu lösen, füge ich .replace(/(\r\n|\n|\r)/g, "11")vorher hinzu .length. Und beim Schneiden der Schnur im Hinterkopf behalten.

Ich endete mit so etwas:

var maxlength = el.attr("maxlength");
var val = el.val();
var length = val.length;
var realLength = val.replace(/(\r\n|\n|\r)/g, "11").length;
if (realLength > maxlength) {
    el.val(val.slice(0, maxlength - (realLength - length)));
}

Ich bin mir nicht sicher, ob es das Problem vollständig löst, aber es funktioniert vorerst für mich.

Roman Pominov
quelle

0

Probieren Sie diese jQuery aus, die in IE9, FF, Chrome funktioniert und Benutzern einen Countdown bietet:

$("#comments").bind("keyup keydown", function() {
    var max = 500;
    var value = $(this).val();
    var left = max - value.length;
    if(left < 0) {
        $(this).val( value.slice(0, left) );
        left = 0;
    }
    $("#charcount").text(left);
}); 

<textarea id="comments" onkeyup="ismaxlength(this,500)"></textarea>
<span class="max-char-limit"><span id="charcount">500</span> characters left</span>

Leslie King
quelle

0

Versuchen Sie, dieses Codebeispiel zu verwenden:

$("#TextAreaID1").bind('input propertychange', function () {
    var maxLength = 4000;
    if ($(this).val().length > maxLength) {
        $(this).val($(this).val().substring(0, maxLength));
    }
});

Naveen
quelle

-1

Das ist viel einfacher:

<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>

Erweitern Sie das Snippet

erdomester
quelle

2

Beachten Sie, dass diese Lösung nicht vollständig repliziert wird, maxlengthda Sie Zeichenfolgen einfügen können, die länger als die gewünschte Länge sind.

Chris Bier

So legen Sie textArea in HTML mithilfe von JavaScript eine maximale Länge fest

Antworten: