Wie erzwinge ich mithilfe von JavaScript dynamisch die maximale Textlänge in Textbereichen?

Eine umfassende Anleitung zum Festlegen einer maximalen Länge für Textbereiche in HTML mithilfe von JavaScript

In der Webentwicklung ist es oft notwendig, die maximale Länge des in Text eingegebenen Textes zu kontrollieren Bereiche. In diesem Szenario müssen Sie das Attribut „maxlength“ automatisch für mehrere Textbereiche erzwingen. Während bei früheren Lösungen die manuelle Ereignisbehandlung für jeden Textbereich erforderlich war, werden wir einen alternativen Ansatz untersuchen, der die Notwendigkeit von sich wiederholendem Code eliminiert.

Lösung:

Der Schlüssel zu dieser Lösung liegt in der Fähigkeit von JavaScript um die Seite nach allen Textbereichen zu durchsuchen und den entsprechenden Ereignis-Listener dynamisch hinzuzufügen. Durch die Nutzung des Onload-Ereignisses erhalten wir beim Laden Zugriff auf den gesamten Seiteninhalt, einschließlich aller Textbereiche.

window.onload = function() {

Jetzt können wir das Dokument durchsuchen und nach allen Elementen mit dem TEXTAREA-Tag suchen:

var txts = document.getElementsByTagName('TEXTAREA');

Als nächstes durchlaufen wir jeden Textbereich, um zu prüfen, ob er ein gültiges maxlength-Attribut hat. Beachten Sie, dass wir einen regulären Ausdruck verwenden, um sicherzustellen, dass der Wert für die maximale Länge eine Zahl ist.

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

Für jeden qualifizierenden Textbereich definieren wir eine Rückruffunktion, um die maximale Länge zu validieren. Diese Funktion wird:

1. den Wert des Maxlength-Attributs als Ganzzahl abrufen
2. Überprüfen, ob die aktuelle Länge des Werts des Textbereichs die Maxlength überschreitet
3. Falls überschritten , eine Warnmeldung anzeigen und den Wert auf die maximal zulässige Länge kürzen

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

Schließlich fügen wir diese Rückruffunktion sowohl den Keyup- als auch den Unschärfeereignissen des Textbereichs hinzu.

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

Dieser umfassende Ansatz bietet eine nahtlose Lösung für die automatische Festlegung einer maximalen Länge für alle qualifizierten Textbereiche auf einer Webseite, ohne dass eine wiederholte Ereignisbehandlung erforderlich ist.

Das obige ist der detaillierte Inhalt vonWie erzwinge ich mithilfe von JavaScript dynamisch die maximale Textlänge in Textbereichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!