Erzwingen der maximalen Länge für HTML-Textbereiche mit JavaScript Wie können Sie eine maximale Länge für festlegen? Elemente in HTML mit reinem JavaScript ohne Rückgriff auf jQuery? Diese Frage stellt sich, wenn Sie die Menge der Benutzereingaben steuern und Textüberläufe verhindern möchten.</p> <p>Eine Methode besteht darin, Tastendruckereignisse mithilfe der Attribute onkeypress und onkeyup in jedem Textbereich zu verarbeiten:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50"> function imposeMaxLength(event, object, maxLength) { return (object.value.length <= maxLength) || (event.keyCode == 8 || event.keyCode == 46 || (event.keyCode >= 35 && event.keyCode <= 40)); } Nach dem Login kopieren Allerdings Das manuelle Hinzufügen dieser Attribute zu jedem Textbereich kann mühsam sein. Hier ist ein alternativer Ansatz, der den Prozess automatisiert: 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; } } };Nach dem Login kopieren Dieses Skript wird beim Laden der Seite initialisiert und durchläuft alle Elemente im Dokument. Für jeden Textbereich mit einem numerischen maxlength-Attribut wird eine Funktion definiert, die prüft, ob der Text den Grenzwert überschreitet. Wenn dies der Fall ist, wird der Benutzer benachrichtigt und die Eingabe wird auf die maximale Länge gekürzt. Durch Zuweisen dieser Funktion zu onkeyup- und onblur-Ereignissen wird die maximale Längenbeschränkung automatisch angewendet, ohne dass Ereignishandler manuell angehängt werden müssen.</p>
