2011-01-13 18 views
3

Ich brauche dieses Feld, um fokussiert zu sein, wenn der Benutzer die Seite öffnet. Ich weiß nicht, ob es etwas ändert, aber es ist in einem modalen Fenster, das ich aus einer PHP-Datei lade.Wie mache ich einen Feld Autofokus?

Gibt es einen einfachen Weg, es zu tun?

Antwort

6

JavaScript autofocusers (wie in den anderen hier gegebenen Antworten) funktionieren, kann aber für einige Benutzer lästig sein. Wenn Sie beispielsweise ein anderes Feld fokussieren, während eine Seite noch geladen wird, kann Ihnen das JavaScript "helfen", indem Sie den Fokus verschieben und das falsche Feld eingeben. This question auf ux.stackexchange.com zählt einige weitere Nachteile auf.

Um dies zu verhindern, hat HTML5 ein autofocus attribute für Formularelemente eingeführt, was bedeutet, dass das Verhalten konsistent vom Browser selbst implementiert wird und für Benutzer, die es irritieren, deaktiviert werden kann. Natürlich wird dies noch nicht von allen Browsern unterstützt. Weitere Informationen finden Sie im Abschnitt autofocus fields in Mark Pilgrims ausgezeichneten Dive Into HTML5 Buch.

+1

+1 für 'ärgerlich' – Dancrumb

+0

@Dancrumb Yep, gerade Link zu [Verwandte Frage auf ui.stackexchange.com] (http://ui.stackexchange.com/q/2861/2530), die mehr Diskussion hat – Day

+0

Danke I fügte "Autofokus" hinzu und ich werde später alles lesen, damit es auf allen Browsern funktioniert. Vielen Dank – lisovaccaro

6

JavaScript verwenden, können Sie dies erreichen:

document.onload = function() { 
    document.getElementById("question-box-0").focus(); 
} 
+0

Ich konnte es nicht auch funktionieren lassen, es ist ein modales Fenster, das von einer PHP-Datei lädt. Kann das etwas zu tun haben? Ich habe das Skript direkt über dem Formular hinzugefügt und es hat nicht funktioniert. Danke – lisovaccaro

+0

Sie müssen dieses Skript hinzufügen, um innerhalb des '' Tags der Datei zu existieren, in der sich das Formular befindet. Umgeben Sie es in '' Tags. –

+0

JS geladen mit Ajax oder ähnlichen Frameworks wird nicht funktionieren. Um JS-Funktionen auszuführen, müssen sie in geladen werden, genau wie @MichaelIrigoyen angegeben – mandza

2
<html> 
<head> 
<script> 
document.onload = function() { 
document.getElementById('question-box-0').focus(); 
}; 
</script> 
</head> 
<body> 
... 
</body> 
</html> 
+0

Es hat nicht funktioniert, es ist ein modales Fenster, das von einer PHP-Datei lädt. Kann das etwas zu tun haben? Ich habe das Skript direkt über dem Formular hinzugefügt und es hat nicht funktioniert. Danke – lisovaccaro

+0

Versuchen Sie, das Skript im Tag wie mein Beispiel zeigt. Dadurch wird sichergestellt, dass der Ereignishandler document.onload festgelegt wird, bevor das Ereignis tatsächlich auftritt. –