Input : Zeit

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.

HTML Code

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" />

Beispiel

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)

CSS

Das Erscheinungsbild der Eingabefelder definiert man global über CSS Selektoren.

.time { width:40px } .required { background-color:rgb(255,255,174) }

Attribute

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!';

Formate

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)

Johannes Hammoud Input : Zeit 12.11.2009

I Coding : Community über Java Programmierung

Sprache Englisch+-

Java JSF JavaScript HTML CSS NetBeans GlassFish MySQL

Impressum

Besuche
5744520
Heute
89