Intelligente Formulare - HTML5 - page 73

textfs[i].labels[0].nextSibling.value =
textfs[i].textLength;
}
}
Der Vorteil der Schleife ist, dass wir nun beliebig viele textarea -Elemente
hinzufügen können, und sofern sie ein meter -Element besitzen, werden die-
se automatisch aktualisiert. Um das zu erreichen, müssen wir zu einem Trick
aus der DOM-Kiste greifen: Die in dem oben stehenden Listing fett gedruckte
Zuweisung greift auf die DOM-Funktion nextSibling zu, einen Verweis auf das
folgende Element. Führen wir uns zum besseren Verständnis noch einmal den
HTML-Code für das Textfeld und den Status-Balken vor Augen. Das textarea -
Element ist von einem label -Element eingeschlossen, auf das das gesuchte
meter -Element folgt. Um vom textarea -Element auf das meter -Element zu
kommen, verwenden wir die labels -Eigenschaft des Textfeldes. Dabei handelt
es sich um ein NodeList -Array, von dem uns das erste Element (also das mit
dem Index 0 ) interessiert, weil das darauffolgende Element (der nextSibling )
das meter -Element ist.
Bei genauerer Betrachtung ist die Vorgehensweise also gar nicht so kompli-
ziert, sie birgt aber ihre Tücken. Sollte sich zwischen dem abgeschlossenen
label -Element und dem meter -Element ein Leerzeichen oder ein Zeilenum-
bruch verirren, dann funktioniert unsere Status-Anzeige nicht mehr. Der next-
Sibling ist dann nämlich ein Text-Element, und in der for -Schleife erreichen
wir das meter -Element nicht mehr.
Als Nächstes wollen wir uns um die Fortschrittsanzeige am Ende des Formu-
lars kümmern. Leicht zu erraten war, dass es sich dabei um ein progress -Ele-
ment handelt, spannender wird, wie sich das Aktualisieren dieses Elements in
JavaScript elegant ausdrücken lässt. Zuerst sehen Sie hier den HTML-Code für
das Element:
<label>Fortschritt:
<progress id=formProgress value=0
tabindex=-1></progress></label>
Das progress -Element bekommt eine id , einen Anfangswert von 0 ( value ) und
einen negativen tabindex zugewiesen, was dazu führt, dass das Element nie
mit der Tabulator-Taste angesprungen wird. Um alles Weitere kümmert sich
die JavaScript-Funktion updateProgress() .