Ganz bestimmt hat jeder, insbesondere bei Facebook, die sich automatisch anpassbaren Textareas gesehen, die nach jedem Zeilenumbruch automatisch durch eine Zeile erhöht werden. Die Funktion ist besonders nützlich, da bei der HTML Programmierung mit Textareas keine festen Flächen auf der Seite besetzt werden. Das bedeutet, das Formular kann immer mit Textarea mit einer Zeile anfangen und sich erhöhen je nach dem welche Angaben ins Feld gemacht werden. Das was noch die Nutzung dieser sich automatisch anpassbaren Felder bequemer macht, sind die fehlenden Scrollbalken, die die Textarea unschön und unübersichtlich machen. Diese Eigenschaften der Textarea werden durch die Javascript Funktion gewährleistet, die wir nachfolgend vorstellen möchten.
Die JS Funktion
function CheckTextAreaHeight(tarea) {
var nCounter = 1;
var sNeedle = "\n";
for (var i=0;i< tarea.value.length;i++) {
if (sNeedle == tarea.value.substr(i,sNeedle.length)) {
nCounter++;
}
}
tarea.rows=nCounter;
}
Funktionsaufschlüsselung
Nachfolgend die Erläuterung darüber wie diese Funktion, die automatisch die Höhe Ihrer Textarea anpasst und der Text in der Textarea / die Textarea selber als Parameter erhält:
1. Es wird von einer Zeile vorausgegangen
2. Es wird nach Umbrüche in der Text gesucht – “\n”
3. Sofern der Umbruch beim Durchsuchen des Textes in einer JS Schleife gefunden wird, wird unser Zähler um 1 erhöht.
4. Am Ende wird der Parameter “rows” (Anzahl der Zeilen) auf den Zählerwert gesetzt.
Diese Javascript Funktion erfordert keine PHP Programmierung und ist eine Client-Side Funktion, die Sie “zu Hause” in einer Text-HTML Datei austesten können.
Einsatz der Funktion
Um die Javascript Funktion zur automatisierten Anpassung einer Textarea in der Anzahl der Zeilen einzusetzen, benötigen Sie vor allem eine Textarea:
<textarea onkeyup="CheckTextAreaHeight(this);" rows="1">Geben Sie hier Ihren weiteren Text</textarea>
Es wird nach dem Loslassen einer Taste jedes Mal die Höhe angepasst und somit können Sie schreiben, ohne nachzudenken, ob Sie das sehen, was Sie schreiben und ohne scrollen zu müssen.
Lesen Sie hier nach weiteren Javascript Funktionen, die wir hier vorgestellt haben.
