HTML Attribut onfocus:
Auszuführender JavaScript-Code bei Fokuserhalt

Beispiel

Ein Formular mit Eingabeaufforderung:

<html><head><title>onfocus-Test</title></head><body>
<form name="demo" action="#">
Eingabe:
<input type="text" name="feld" value="Wert eingeben"
  onfocus="this.value=step_focus(this.value); return true;"
  onblur="this.value=step_blur(this.value); return true;">
</form>
<script type="text/javascript">
  function step_focus(wert) {
    if (wert == "Wert eingeben") {
      return "";
    } else {
      return wert;
    }
  }
  function step_blur(wert) {
    if (wert == "") {
      return "Wert eingeben";
    } else {
      return wert;
    }
  }
</script>
</body></html>

Anwendung

onfocus wird ausgeführt, wenn das Element betreten wird, also den Fokus erhält.

Besonders häufig wird dies in Formularen verwendet, um entweder direkt ein Feedback zu geben, oder einen Default zu entfernen. Für letzteres wird es mit onblur kombiniert.

Im obigen Beispiel finden Sie ein kleines Formular demo. Es definiert ein Eingabefeld, welches initial eine Aufforderung zeigt.

Klickt der Benutzer nun in das Feld (onfocus) wird diese Aufforderung entfernt und der Benutzer kann schreiben. Wird das Feld verlassen (onblur), wird die Aufforderung wieder hergestellt, wenn der Nutzer selbst keinen Wert eingegeben hat.

Hinweise

Javascript sollte zur Optimierung eingesetzt werden. Stellen Sie sicher, dass Ihre Navagation und Ihre Formulare auch ohne Javascript noch funktionieren.

Grundsätzliches zur Nutzung von JavaScript-Events in HTML

Die meisten Events sind generell und an praktisch allen HTML-Tags nutzbar. Einige andere sind nur mit den sinnhaft passenden Tags möglich. Mitunter wertet jedoch ein Browser nicht alle Möglichkeiten aus.

Der Wert des Event-Attributes onfocus ist ausschließlich JavaScript – entsprechend gelten die JavaScript-Syntax-Regeln. Ich empfehle nur kurze Scripte direkt zu platzieren. Erstellen Sie sonst eine Funktion und lassen diese dann durch onfocus aufrufen.

Grundsätzlich wird der Event vor dem HTML-Tag ausgeführt. Der JavaScript-Code sollte generell einen Rückgabewert erzeugen, true oder false. Per Voreinstellung wird true angenommen. Der Rückgabewert beantwortet die Frage, ob der HTML-Tag noch ausgeführt werden soll. Dabei bedeutet false, dass der Tag nicht mehr ausgeführt werden soll (was der häufigste Fall ist).

In dieser Form ist es möglich, JavaScript einzuführen und zu nutzen, ohne nicht-JavaScript-fähige Browser auszuschließen.

Unterstützendes Hinzufügen von JavaScript

Beispiel: HTML-Tag abbrechen:

<a href="kein-javascript.html" 
  onclick="self.location.href='javascript.html';return false;">klick</a>

Mit aktivierter JavaScript-Unterstützung wird zu javascript.html verzweigt. Da die Rückgabe false ist, wird der HTML-Verweis nicht weiter beachtet.

Ohne aktivierte JavaScript-Unterstützung wird zu kein-javascript.html, da onclick vom Browser gar nicht ausgewertet wird.

Beispiel: HTML-Tag ausführen lassen:

<a href="naechste-seite.html" 
  onclick="alert('weiter geht es...');">klick</a>
<a href="naechste-seite.html" 
  onclick="alert('weiter geht es...');return true;">klick</a>

Hier wird mit und ohne JavaScript-Unterstützung zu naechste-seite.html verzweigt. Ist JavaScript aktiviert, gibt es zusätzlich eine Meldung bevor verzweigt wird. Die Verzweigung selbst wird hier in jedem Fall über HTML realisiert.

Nutzen von JavaScript

Neben der schon gezeigten Optimierung mit JavaScript ist die Überprüfung von Formularen eine der wichtigsten Einsatzgebiete.

Beispiel:

<form name="formular" method="post" action="verarbeite.php"
  onsubmit="return erlaubt( );">
..
</form>

Was passiert: Beim Absende-Versuch (Klick auf den Submit-Button) wird eine JavaScript-Funktion (hier: erlaubt) aufgerufen. In dieser Funktion kann der Betreiber zum Beispiel prüfen, ob alle notwendigen Felder ausgefüllt wurden. Ist alles ok, könnte er true liefern, sonst false. Letzteres würde das Absenden abbrechen.

Der Vorteil ist, dass so die wichtigsten Prüfungen bereits gemacht werden können, ohne dass überhaupt etwas an den Server übermittelt wurde.

Natürlich muss das auch noch mal auf dem Server (hier: in verarbeite.php) geprüft werden. Für Besucher ohne JavaScript wird die Prüfung vor Absenden ja nicht ausgeführt und Daten sofort übermittelt.

Verfügbare Javascript Events in HTML

Attribut	Beschreibung
`onblur`	Auszuführender Javascript-Code bei Fokusverlust
`onchange`	Auszuführender Javascript-Code bei Wertänderung
`onclick`	Auszuführender Javascript-Code bei Klick
`ondblclick`	Auszuführender Javascript-Code bei Doppelklick
`onerror`	Auszuführender Javascript-Code bei Auftreten eines Fehlers
`onfocus`	Auszuführender Javascript-Code bei Fokuserhalt
`onkeydown`	Auszuführender Javascript-Code bei Drücken einer Taste
`onkeypress`	Auszuführender Javascript-Code bei gedrückt gehaltener Taste
`onkeyup`	Auszuführender Javascript-Code bei Loslassen einer Taste
`onload`	Auszuführender Javascript-Code, wenn alle Frames geladen wurden
`onload`	Auszuführender Javascript-Code, wenn Dokument fertig geladen wurde
`onload`	Auszuführender Javascript-Code, wenn Grafik/Applet fertig geladen wurde
`onmousedown`	Auszuführender Javascript-Code bei Drücken einer Maustaste
`onmousemove`	Auszuführender Javascript-Code, wenn die Maus bewegt wird
`onmouseout`	Auszuführender Javascript-Code, wenn die Maus das Element verlässt
`onmouseover`	Auszuführender Javascript-Code, wenn die Maus auf das Element bewegt wird
`onmouseup`	Auszuführender Javascript-Code bei Loslassen einer Maustaste
`onreset`	Auszuführender Javascript-Code bei Löschen eines Formulars
`onselect`	Auszuführender Javascript-Code bei Textselektierung
`onsubmit`	Auszuführender Javascript-Code bei Absenden eines Formulars
`onunload`	Auszuführender Javascript-Code, wenn alle Frames entfernt wurden
`onunload`	Auszuführender Javascript-Code, wenn Dokument entladen (geschlossen) wurde

HTML Attribut onfocus:Auszuführender JavaScript-Code bei Fokuserhalt