Kleines JavaScript

Die Überprüfung von Formularfeldeingaben erfolgt sinnvollerweise auf dem Server. Erfolgt sie im Browser mit JavaScript - wie hier demonstriert -, kann dies nur als zusätzliche Möglichkeit in Betracht kommen.

Merkmale:

• Standardtext in den Textfeldern
• Verschwinden der Standardtexte beim Hineinklicken
• Markieren des gesamten Textes beim Hineinklicken
• Wiedererscheinen der Standardtexte bei fehlender Eingabe
• Überprüfen der Felder beim Aufruf des Formulars, beim Verlassen eines Feldes, bei Maus über oder Klick! auf die Ampel, vor dem Senden und nach Reset
• Entfernen von Leerstellen am Anfang und Ende einer Eingabe und Ersetzen von aufeinanderfolgenden Leerstellen durch eine Leerstelle
• Überprüfen der E-Mail-Adresse auf formale Richtigkeit
• Fehlmeldung im ALT-Text der Ampel, im Internet Explorer formatiert
• Fehlmeldung als Alert-Box beim Klick! auf die Ampel
• Bei mehr als einer Fehlmeldung Auflistung mit Bindestrich in eigenem Absatz
• Bei mehr als einer Fehlmeldung vor der letzten Fehlmeldung ein "und" statt ein Komma
• Bei einer Fehlmeldung vollständiger Satz.
• Kein Versenden ohne vollständig ausgefüllte Formularfelder, stattdessen Fehlmeldung als Alert-Box
• Nach Überprüfen der Felder durch Klick! auf die Ampel oder den Senden-Button Focus auf das erste fehlerhaft ausgefüllte Feld
• Realistisches Umspringen der Ampel über Rotgelb nach Grün und über Gelb nach Rot
• Bei ausgeschaltetem JavaScript/Scripting gelb blinkende Ampel

einfache Grafiken:

animierte Grafiken:

      Test:  

Testen Sie Ihren Browser

Testen Sie durch Klick! auf die Ampeln, ob beim Grafiktausch eine animierte Grafik mit einmaligem Ablauf erneut abgespielt wird. Wenn Sie die Gelbphasen sehen, läuft die Animation erneut ab ( ). Springt die Ampel direkt auf Grün oder Rot, wird die animierte Grafik nicht neu gestartet ( z.T. ).

Download "ampel.zip" (5 KB)

Bug Netscape/Mozilla: Animierte Grafiken ohne Wiederholung laufen schon beim Laden ab, ohne daß sie angezeigt werden. Beim Eintauschen dieser Grafik ist nur das letzte Bild der Animation zu sehen. Bug Mozilla Firebird/Mozilla(Linux)/Galeon: Interessanterweise tritt hier das Problem nur dann auf, wenn die Grafik mehrmals, auch in verschiedenen Fenstern, angezeigt wird. Ist die eingetauschte Grafik solitär, läuft sie ab. Bug Opera: Opera verhält sich ebenso, startet eine animierte Grafik zusätzlich immer dann, wenn sie ins Bild gescrollt wird. Bug Konqueror: Hier läuft die eingetauschte animierte Grafik zwar erneut ab, gleiche Grafiken auch in einem anderen Fenster jedoch mit ihr.
- Die Verwendung von einmal ablaufenden GIF-Animationen ist wegen des unterschiedlichen Browserverhaltens deshalb obsolet. Bug-Fix: Die Gelbphasen der Ampel werden mit JavaScript und nicht-animierten Grafiken realisiert.

Bug Netscape 4.x: Dynamische Änderung des ALT-Textes einer Grafik ist nicht möglich. Bug-Fix: Kein. Es wird nur der fixe ALT-Text des HTML-Codes angezeigt.

Bug Netscape 4.x: Überbreite von mit CSS implizit formatierten Formularfeldern. Bug-Fix: Die Formatierung für Formularfelder wird aufgehoben.

Bug Netscape 6 und höher/Mozilla/Mozilla Firebird: Das Markieren des gesamten Textes beim Hineinklicken in ein Feld funktioniert aus unerfindlichen Gründen nur bei jedem zweiten Klick. Bug-Fix: Kein.

Bug Netscape 6 und höher/Mozilla/Mozilla Firebird: Die ALT-Texte werden nur einzeilig und unvollständig dargestellt. Bug-Fix: Kein.