IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - Javascript: maximale Länge für Textarea-Inhalt



Javascript: maximale Länge für Textarea-Inhalt

Ein Tutorial das erklärt wie Sie verhindern dass in einem Formularfeld mehr Zeichen stehen als zugelassen.


Autor: Patrick Faes (dreamer)
Datum: 02-08-2006, 07:01:31
Referenzen: siehe Text
Schwierigkeit: Anfänger
Ansichten: 18600x
Rating: Bisher keine Bewertung.

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einführung

Textfelder erlauben es selbst Text einzugeben und diese am Server zu senden. Genau dadurch wird das Internet zu ein flexibles Kommunikationsmedium. So können Leute Nachrichten in einem Forum oder Gästebuch hinterlassen, Webmail-Dienste wie z.B. Hotmail.de nutzen, Seiten kommentieren, usw.
Diese Daten werden dann in einer Datenbank gespeichert. Aber vielleicht möchten Sie als Seitenbetreiber diese Datenflut mangels Speicherplatz begrenzen. Sie können z.B. mit PHP einfach einen Teil der Daten abschneiden, aber das weiß Ihr Besucher nicht. Deshalb sollten Sie ihm mitteilen wieviel Text er verwenden darf und ihn bei Überschreitung darauf hinzweisen. Folgendes Beispiel demonstriert dies:


Theoretische Ausarbeitung

Das Skript zählt wieviele Zeichen (Buchstaben, Ziffern, Leerstellen, Lesezeichen,usw.) es in der Textarea gibt (es können auch einfache Input- oder Passwort-Felder sein). Im Skript ist angegeben wieviele Zeichen in der Textarea stehen dürfen. Das Skript errechnet aus diese Daten wieviele Zeichen noch verwendet werden dürfen und zeigt diese Daten an in einem separaten Textfeld unter der Textarea.
Wenn jemand dennoch mehr Zeichen verwendet als erlaubt, wird das Skript das Zuviel an Zeichen wieder abschneiden und darauf aufmerksam machen mit einer Alert-Box (Sie können das mal im obigen Beispiel ausprobieren).

Anmerkung: für Input-Felder gibt es das Attribut maxlength dass die maximale Länge des Textes angibt, dies gibt es jedoch nicht für das Textarea-Element
   <input type="text" maxlength="70"></input>

Praktische Ausführung

Das Skript wird hier in Teilen gezeigt, unten steht es nochmal als ganzes.
Das Tutorial baut auf einige Vorkenntnisse im Bereich Javascript auf. Am Ende des Tutorials steht eine Liste mit Referenzen wo Sie mehr zu eine Funktion oder einem Schlüsselwort erfahren.

Zuerst kommt die Deklarierung der Variablen:
   var formular = null;
   var textfeld = null;
   var uebrigFeld = null;
   var intv = null;
   var maxZeichen = 0;
Den Nutzen dieser Variablen wird später noch verdeutlicht. Sie müssen nur wissen dass diese Variablen ausserhalb der Funktion deklariert sind, weil Sie ansonsten verloren gehen. Um flexibel zu sein (sprich die Funktion auch für andere Textfelder auf einer Seite verwenden zu können), kriegen diese keinen Standardwert. Beim Start des Skripts kriegen diese einen Wert. In einem Zeitinterval wird in feste Zeitabständen das Skript erneut ausgeführt. Bei der Beendung des Skripts gehen alle Daten verloren, es sei denn diese stehen in Variablen ausserhalb der Funktion.

Auch verwenden wir nicht das onChange-Ereignis. Dieses Ereignis wird ausgelöst wenn sich der Wert (sprich Text innerhalb) eines Textfelds ändert. Jedoch machen nicht alle Browser dies auf die gleiche Weise. Firefox reagiert sofort nachdem der Text geändert wurde, während Internet Explorer erst reagiert nachdem der Text geändert UND das Textfeld verlassen wurde. Wir verwenden deshalb die Ereignisse onFocus (Element erhält den Focus) und onBlur (Element verliert den Focus). Mit dem sogenannten Focus wird gemeint dass der User ein Textfeld selektiert um darin Text zu tippen.

Der Aufruf dieser Ereignisse sieht in unser obiges Beispiel so aus:
   <textarea 
       onFocus="formular=this.form; textfeld=this; uebrigFeld=this.form.uebrig;
                            maxZeichen=70; intv=setInterval('Zaehlen()', 100);"
       onBlur="clearInterval(intv); Zaehlen(); formular=null; textfeld=null; uebrigFeld=null;
                        maxZeichen=0;"
   </textarea>
Hier werden die Variablen beim onFocus-Ereignis initialisiert mit folgenden Werten:
  1. formular: eine Referenz zum Formular worin das Textfeld steht (mit this.form, kann z.B. dazu verwendet werden um im Skript auch auf andere Elemente im selben Formular zuzugreifen)
  2. textfeld: eine Referenz zum Textfeld (mit this, dadurch wird vermieden dass Sie ellenlangen Code schreiben müssen um zu alle Browsern kompatibel zu sein)
  3. uebrigFeld: eine Referenz zum Textfeld worin die Anzahl der verbleibenden Zeichen angezeigt wird (mit this.form.uebrig, wobei uebrig der Name des Textfeldes ist)
  4. intv: enthält das Interval (wird in eine Variable gespeichert um das Interval später wieder beenden zu können); das Interval wiederholt sich um die Zehntelsekunde
  5. maxZeichen: enthält die Anzahl der zugelassene Zeichen (im obigen Beispiel 70)
Die Reihenfolge ist hier wichtig!
Beim onBlur-Ereignis wird zuerst das Interval gestoppt und die Funktion noch ein letztes Mal ausgeführt (um sicher zu gehen dass der Text nicht zu lang ist). Dann werden die Variablen wieder auf ihre Anfangswerte zurück gesetzt. Auch hier ist die Reihenfolge wichtig!
  1. clearInterval(intv): beendet das Interval das in der Variable intv gespeichert ist
  2. Zaehlen(): ruft die Funktion Zaehlen() noch ein letztes Mal auf
  3. die Variablen formular, textfeld und uebrigFeld werden wieder auf "null" gesetzt (bedeutet "kein Wert") und die Variable maxZeichen auf 0
Dann sehen wir uns die recht einfache Funktion "Zaehlen()" mal an.
   function Zaehlen ()
   {
       var laenge = textfeld.value.length;
       var uebrig = maxZeichen - laenge;

       if (uebrig < 0)
       {
             var inhalt = textfeld.value;
             var neuerInhalt = inhalt.substr(0, maxZeichen);
             textfeld.value = neuerInhalt;
             uebrig = 0;
             alert('Sie dürfen maximal ' + maxZeichen + ' Zeichen verwenden!');
       }
    
       uebrigFeld.value = uebrig;
   }
Am Anfang wird errechnet wieviele Zeichen noch verwendet werden dürfen. Dazu speichern wir die Anzahl der Zeichen im Textfeld in der Variablen laenge. Danach können wir errechnen wieviele Zeichen noch verwendet werden dürfen. Das errechnen wir mit maxZeichen minus laenge. Das Resultat wird gespeichert in der Variablen uebrig.

Wenn uebrig einen negativen Wert hat, bedeutet dies dass die Anzahl der Zeichen im Textfeld größer ist als erlaubt. Dann müssen wir dies korrigieren. Wir speichern den Text aus dem Textfeld in der Variable inhalt. Mit der Funktion "substr()" nehmen wir die ersten 70 Zeichen (oder wieviele Sie gerade erlauben, die Anzahl ist gespeichert in der Variable maxZeichen) des Inhalts. Der dadurch gewonnene Text (neuerInhalt) stellen wir im Textfeld. Die Variable uebrig geben wir erneut den Wert 0. Mit der Funktion "alert()" geben Sie eine Meldung aus, so dass der Besucher dies auch weiß.

Danach wird noch die Anzahl die sich in der Variablen uebrig befindet im Formularfeld unter dem Textfeld geschrieben.
Code einbauen:

Stellen Sie folgender Code im HEAD-Bereich Ihrer Seite:
   <script type="text/javascript" language="javascript">
   var formular = null;
   var textfeld = null;
   var uebrigFeld = null;
   var intv = null;
   var maxZeichen = 0;

   function Zaehlen ()
   {
       var laenge = textfeld.value.length;
       var uebrig = maxZeichen - laenge;

       if (uebrig < 0)
       {
             var inhalt = textfeld.value;
             var neuerInhalt = inhalt.substr(0, maxZeichen);
             textfeld.value = neuerInhalt;
             uebrig = 0;
             alert('Sie dürfen maximal ' + maxZeichen + ' Zeichen verwenden!');
       }
    
       uebrigFeld.value = uebrig;
   }
   </script>
Danach erstellen Sie ein Formular mit einem Textfeld. Das kann eine Textarea sein (mehrzeiliges Eingabefeld), ein Input-Feld vom Typ "text" (einzeiliges Eingabefeld) oder ein Input-Feld vom Typ "password". Zusätzlich erstellen Sie ein Textfeld dass die Anzahl der verbleibenden Zeichen anzeigt. Das Textfeld wird mit Javascript auf der Seite geschrieben, wodurch es nur sichtbar ist für Besucher die Javascript aktiviert haben (die Anderen haben ja eh nichts dran):
   document.write('
Sie können nur noch <input type="text" size="3" name="uebrig"> weitere Zeichen verwenden.');
Das Textfeld hat den Namen "uebrig".

Das Textfeld worin der Besucher sein Text tippen soll, statten Sie aus mit den onFocus- und onBlur-Ereignissen. Diese haben folgende Statements:
   <textarea 
       onFocus="formular=this.form;
                            textfeld=this;
                            uebrigFeld=this.form.uebrig;
                            maxZeichen=70;
                            intv=setInterval('Zaehlen()', 100);"
       onBlur="clearInterval(intv);
                        Zaehlen();
                        formular=null;
                        textfeld=null;
                        uebrigFeld=null;
                        maxZeichen=0;"
   </textarea>
Das Einzige was Sie hieran ändern sollten, ist die Anzahl die Sie in der Variable maxAnzahl speichern.
Beachten Sie auch noch dass alle Feldern zwischen <FORM>-Tags stehen müssen.
Referenzen:
  • Formulare in HTML: dienen dazu große Datenmengen am Server zu schicken; mehr dazu
  • Eingabefelder (Formulare): erlauben es Text einzutippen und am Server zu schicken; mehr dazu
     
  • Funktionen definieren: Funktionen sind Code-Blöcke die Sie zu jeder Zeit ausführen können; mehr dazu
     
  • Variablen in Javascript: können Daten speichern; mehr dazu
  • Operatoren: erlauben es Berechnen durchzuführen und Werte zuzuweisen; mehr dazu
     
  • Bedingungen (if): sorgen dafür dass bestimmter Code nur ausgeführt wird wenn bestimmte Bedingungen erfüllt sind; mehr dazu
     
  • document.write(): schreibt Text zur Seite; mehr dazu
  • substr(): ermittelt ein Teil eines Text; mehr dazu
     
  • alert(): dient dazu den User auf etwas aufmerksam zu machen; mehr dazu
     
  • Ereignisse (algemein): bestimmte Aktionen in Javascript rufen eine Funktion auf; mehr dazu
  • onChange: ruft eine Funktion auf wenn der Text eines Textfelds verändert wurde; mehr dazu
  • onFocus: ruft eine Funktion auf wenn ein bestimmtes Seitenelement selektiert wird; mehr dazu
  • onBlur: ruft eine Funktion auf wenn ein bestimmtes Seitenelement verlassen wird; mehr dazu


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04511
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06248
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1158
Comments: 0