Durchsetzung von Zeichenbeschränkungen in Textbereichen mit JavaScript

Bei der Arbeit mit HTML-Formularen ist es oft entscheidend, die Anzahl der Zeichen zu begrenzen, die Benutzer in Textbereiche eingeben können. Obwohl das -Element ein maxlength-Attribut bietet, ist dies nicht immer die bequemste Möglichkeit, diese Funktionalität zu implementieren.

Maxlength mit JavaScript emulieren

Anstatt das maxlength-Attribut manuell festzulegen, kann JavaScript dies tun genutzt, um den gleichen Effekt zu erzielen. Ein Ansatz besteht darin, Ereignishandler wie onkeypress und onkeyup zu verwenden, um die Länge des Werts des Textbereichs zu überwachen und die Eingabe entsprechend einzuschränken. Diese Methode erfordert jedoch die Wiederholung des Ereignisbehandlungscodes für jeden Textbereich.

Automatische Längendurchsetzung

Um den Prozess der Durchsetzung von Zeichenbeschränkungen zu automatisieren, besteht eine elegantere Lösung darin, JavaScript-Code zu verwenden, der auswertet das maxlength-Attribut jedes Textbereichselements dynamisch. Dieser Ansatz umfasst die folgenden Schritte:

1. Textbereiche identifizieren: Verwenden Sie document.getElementsByTagName('TEXTAREA'), um eine Liste aller Textbereiche im Dokument abzurufen.
2. Prüfung auf maxlength-Attribut: Überprüfen Sie für jeden Textbereich, ob er ein maxlength-Attribut mit einem gültigen Wert (eine Zahl größer als 0) hat.
3. Anonyme Funktion erstellen : Definieren Sie eine anonyme Funktion, um die Länge des Textbereichs zu validieren und eine Warnung anzuzeigen, wenn das Limit überschritten wird.
4. Ereignishandler zuweisen: Weisen Sie die anonyme Funktion als Onkeyup- und Onblur-Ereignis zu Handler für den Textbereich. Diese Ereignisse werden immer dann ausgelöst, wenn der Benutzer den Textbereich eingibt oder verlässt, und veranlassen die Längenüberprüfung.

Das in der Frage bereitgestellte Codebeispiel veranschaulicht diesen Ansatz und erzwingt automatisch das Attribut „maxlength“ für alle Textbereiche im Dokument . Durch den Einsatz dieser Technik können Entwickler Zeichenbeschränkungen durchsetzen, ohne dass sich wiederholender Code für die Ereignisbehandlung erforderlich ist.