2011-01-13 4 views
3

J'ai besoin que ce champ soit focalisé lorsque l'utilisateur ouvre la page. Je ne sais pas si ça change quelque chose mais c'est dans une fenêtre modale que je charge à partir d'un fichier PHP.Comment faire un autofocus sur le terrain?

Y at-il un moyen facile de le faire?

Répondre

6

autofocusers JavaScript (comme indiqué dans les autres réponses ici) fonctionne, mais peut être gênant pour certains utilisateurs. Par exemple, si vous mettez un champ différent pendant qu'une page est en cours de chargement, le JavaScript peut vous «aider» en déplaçant le focus et en vous faisant taper dans le mauvais champ. This question sur ux.stackexchange.com énumère quelques inconvénients supplémentaires. Pour éviter cela, HTML5 a introduit un autofocus attribute pour les éléments de formulaire, ce qui signifie que le comportement sera implémenté de manière cohérente par le navigateur lui-même et peut être désactivé pour les utilisateurs qui le trouvent irritant. Bien sûr, ceci n'est pas encore supporté par tous les navigateurs. Pour plus d'informations, voir la section sur autofocus fields dans l'excellent livre Dive Into HTML5 de Mark Pilgrim.

+1

+1 pour 'ennuyeux' – Dancrumb

+0

@Dancrumb Yep, vient d'ajouter un lien vers [question connexe sur ui.stackexchange.com] (http://ui.stackexchange.com/q/2861/2530) qui a plus de discussion – Day

+0

Merci ajouté "autofocus" et je lirai plus tard tout cela pour que cela fonctionne sur tous les navigateurs. Merci – lisovaccaro

6

L'utilisation de JavaScript, vous pouvez réaliser ceci:

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

Je ne pouvais pas le faire fonctionner aussi, c'est une fenêtre modale qui charge à partir d'un fichier PHP. Cela peut-il avoir quelque chose à faire? J'ai ajouté le script juste au-dessus du formulaire et cela n'a pas fonctionné. Merci – lisovaccaro

+0

Vous devrez ajouter ce script pour exister dans la balise '' du fichier sur lequel se trouve le formulaire. Entourez-le dans les balises ''. –

+0

JS chargé avec ajax ou des cadres similaires ne fonctionnera pas. Pour exécuter les fonctions JS, ils doivent être chargés dans tout comme @MichaelIrigoyen a déclaré – mandza

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

Cela n'a pas fonctionné, c'est une fenêtre modale qui charge à partir d'un fichier PHP. Cela peut-il avoir quelque chose à faire? J'ai ajouté le script juste au-dessus du formulaire et cela n'a pas fonctionné. Merci – lisovaccaro

+0

Essayez de définir le script dans la balise comme mes exemples de spectacles. Cela permet de s'assurer que le gestionnaire d'événements document.onload est défini avant que l'événement ne se produise réellement. –