Mit dem JSAction Framework kann man sehr einfach ein HTML Input Element mit einer JavaScript Zeitprüfung verbinden. Dazu kodiert man lediglich eine bestimmte CSS Klasse im HTML Code und schon wird automatisch eine Realtime Prüfung für das Input Element registiert. Der Code bleibt dabei absolut valide.
Die CSS Klasse time kennzeichnet ein Input Element als Zeitfeld. Zusätzlich kann man mit required festlegen ob das Element ein Pflichtfeld sein soll.
<input type="text" name="time1" class="time" />
<input type="text" name="time2" class="time required" />
Die folgenden Felder prüfen die Eingabe in Realtime bei Tastendruck (onkeyup) und beim Verlassen (onblur). Die Eingabe kann mit oder ohne Trennzeichen durchgeführt werden, im zweiten Fall wird die Zeit beim Verlassen des Eingabefeldes automatisch formatiert.
Zeit 1:
Zeit 2: (required)
Das Erscheinungsbild der Eingabefelder definiert man global über CSS Selektoren.
.time { width:40px }
.required { background-color:rgb(255,255,174) }
Für internationale Anwendungen kann man das Zeitformat länderspezifisch setzen. Die Anordnung der Stunden, Minuten und Sekunden kann nicht geändert werden. Das Zeittrennzeichen ist aber frei wählbar. Die Fehlermeldung ist ebenfalls individuell in der passenden Sprache änderbar.
HpResource.timePattern = 'HH:mm';
HpResource.timeSeparator = ':';
HpResource.errorTime = 'Keine gültige Zeit!';
Das Standard Zeitformat kann man auch ganz einfach mit einem individuellen Format für ein spezielles Eingabefeld überschreiben.
class="time HH" (nur die Stunde)
class="time mm" (nur die Minute)
class="time ss" (nur die Sekunde)
class="time mmss" (Minute und Sekunde)
class="time HHmmss" (Stunde, Minute und Sekunde)
Autor: Johannes HammoudKommentare Datum: 12.11.2009