Inhalt:

HTML5: focus ohne Javascript

Javascript ist nicht jedermanns Sache: manchmal ist es nicht gewünscht, manchmal ist es im Browser deaktiviert.. Mit HTML5 gibt es nun endlich die Möglichkeit ein Textfeld zu fokussieren, ohne dabei auf Javascript zurückzugreifen. Dazu ist es lediglich erforderlich dem entsprechenden Formularfeld eine Eigenschaft "autofocus" zu übergeben, danach klappt das Fokussieren des Feldes auch ohne Javascript..

Ein Bespiel:
<input id="nachname" name="nachname" autofocus />Die Eigenschaft autofocus setzt dabei den Cursor direkt in das Eingabefeld. Im Browser sieht es dann etwa so aus (Das Eingabefeld ist aktiv und der Cursor blinkt):

Wer sich das gerne "live" ansehen möchte braucht natürlich einen entsprechenden Browser. Zumindes Chrome und Opera unterstützen diese Funktion in der aktuell erhältlichen Version. (zum Live-Preview)

Solange noch nicht alle aktuellen Browser unterstützt werden sollte man gegebenenfalls ein Fallback mittels Javascript nutzen.  Ein Fallback könnte dann etwa so simuliert werden:
<form name="formular">
   <input id="nachname" autofocus>
   <script>
      if (!("autofocus" in document.createElement("input")))
         document.getElementById("nachname").focus();
   </script>
   <input type="submit" value="Go">
</form>
Hier wird per Javascript zunächst das input-Feld auf die Eigenschaft autofocus überprüft. Wird "autofocus" nicht gefunden kommt die Javascript-Funktion focus(); zum Einsatz.

« Letzte Änderung: 10.01.2012 15:18 »

Kommentar(e)

Kommentar eintragen

Wer Kommentare hinterlassen will muss registriert sein ...

Seiten: [1]