Um ein Formularelement mit einer Beschriftung zu versehen, existiert der<label> Tag.

Anders als bei der Verwendung von "normalem" Text besteht hier, dank des for-Attributs, ein direkter Bezug zum jeweiligen Eingabefeld.

Zusätzlich kann es sinnvoll sein, dem Formularfeld einen Wert vorzugeben. Der Nutzer sieht spo, unabhängig von der Positionierung des Labels, kurz vor der Eingabe, noch einmal, welcher Wert gefragt ist.

In einem kleinem HTML Beispiel sieht das Ganze so aus:


<form>

<label for="email">E-Mailadresse</label>
<input type="text" value="E-Mail" title="E-Mail" name="email" />

<label for="nachricht">Nachricht</label>
<textarea name="nachricht" title="Hinterlassen Sie hier Ihre Nachricht.">
Hinterlassen Sie hier Ihre Nachricht.
</textarea>

<input id="submit" type="submit" name="submit" value="Absenden" />

</form>

 

Klickt der Nutzer nun in eines der Felder, so blebt der vorgegebene Inhalt erhalten. Der Anwender ist gezwungen diese Vorgabe manuell zu löschen.

Eleganter ist es, den Text via Javascript zu entfernen. Dank jQuery lässt sich dies sehr einfach realisieren.


$('.clearMeFocus')
.focus( function() {
if ( $(this).val() == this.defaultValue ) { $(this).val(''); }
})

 

Bekommt also ein Element mit der Klasse .clearMeFocus Fokus, so wird zunächst geprüft, ob der aktuelle Wert dem Voreinstellungswert entspricht. Falls ja, wird der Wert und damit der Inhalt des Feldes gelöscht.

Verlässt der Nutzer das Feld, kann mit einer kleinen Funktion geprüft werden, ob eine Eingabe erfolgt ist. Sollte das Feld noch immer leer sein, so lässt sich der Wert bequem wieder auf den Eingangswert zurücksetzen.


.blur( function() {
if ( $(this).val()=='' ) { $(this).val(this.defaultValue); }
});

 

Komplett sieht die Anweisung dann also wie folgt aus:


$('.clearMeFocus')
.focus( function() {
if ( $(this).val() == this.defaultValue ) { $(this).val(''); }
})
.blur( function() {
if ( $(this).val()=='' ) { $(this).val(this.defaultValue); }
});

 

Gesehen bei Nick Boldison und der dort vorhandenen Kommentare etwas angepasst.

schreibstift

veröffentlicht von schreibstift