Weiter zum Inhalt

Beiträge mit Stichwort ‘focus’

29
Jul

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 🙂