Weiter zum Inhalt

29. Juli 2010

4

JavaScript – Textfeld beim Laden fokussieren

Hier mal ein kleines Tutorial, in dem ich euch zeigen will, wie man den Fokus auf ein Texfeld setzt.

Es soll also nach dem Laden das Textfeld ausgewählt sein, sodass man gleich in das Textfeld schreiben kann ohne es vorher mit der Maus auswählen zu müssen. (Bsp. Google)

Zunächst benötigen wir also eine HTML-Datei mit einem Textfeld. Das könnte in etwa so aussehen:

[html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fokussiertes Textfeld</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<center>
<form action="">
<input type="text" id="textfeld" name="textfeld" size="32" />
</form>
</center>
</body>
</html>
[/html]

Jetzt kommt JavaScript ins Spiel:

Mit onload=““ erreichen wir, dass das ganze beim Laden der Seite passiert. Mit self.focus(); wird die aktuelle Seite und mit document.getElementById(‚feldID‘).focus(); das entsprechende Feld, mit Hilfe dessen ID, fokussiert.

**adsenseBlock**

Da dies für die aktuelle Seite gelten soll, muss das ganze in den Body:

[html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fokussiertes Textfeld</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body onload="self.focus(); document.getElementById(‚textfeld‘).focus();" >
<center>
<form action="">
<input type="text" id="textfeld" name="textfeld" size="32" />
</form>
</center>
</body>
</html>
[/html]

Wie ihr seht, mussten wir in unserem Beispiel nur die ID des zu fokusierenden Elements ändern. Also document.getElementById(‚textfeld‘).focus(); .

Das wars auch schon 🙂

4 Kommentare
  1. Pede
    Jul 30 2010

    Und was kann ich damit machen?

  2. Abbadon
    Jul 31 2010

    @Pede
    Mit dem Textfeld allein kannst du nichts machen. Aber das Tutorial soll ja auch nur zeigen wie man den Fokus auf ein Textfeld legt.

  3. Pede
    Jul 31 2010

    Ach jetzt versteh ich, was gemeint ist. Habs gerade nochmal durchgelesen

    Wieviele kucken den Blog eingentlich an?

  4. Abbadon
    Jul 31 2010

    @Pede
    Es werden täglich mehr 🙂

Kommentare wurden geschlossen.