Existe-t-il un moyen simple de mettre l'accent (curseur de saisie) d'une page web sur le premier élément d'entrée (textbox, dropdownlist, ...) au chargement de la page sans avoir à connaître l'id de l'élément ?
J'aimerais l'implémenter en tant que script commun à toutes les pages/formulaires de mon application web.
Bien que cela ne réponde pas à la question (nécessitant un script commun), j'ai pensé qu'il pourrait être utile pour d'autres de savoir que HTML5 introduit l'attribut "autofocus" :
<form>
<input type="text" name="username" autofocus>
<input type="password" name="password">
<input type="submit" value="Login">
</form>Plonger dans le HTML5 pour plus d'informations.
Autofocus est le nom de l'attribut . Qu'en est-il de sa valeur ? quelque chose comme autofocus=true n'est pas nécessaire ? Qu'est-ce que cela signifie de ne pas définir de valeur ?
En HTML5, certains attributs n'ont pas besoin d'avoir une valeur, "checked" est un autre attribut pour lequel c'est le cas. Je pense que lorsque la valeur n'est pas indiquée, il est sous-entendu qu'elle est identique au nom (par exemple, autofocus="autofocus" et checked="checked").
Mon application Spring s'interrompt lorsque j'essaie d'utiliser autofocus sans valeur sur spring:form . autofocus="autofocus" fonctionne bien. Merci, @Jacob.
Ça marche ! Je commence à intégrer jQuery dans mon application web. Je pense donc que je vais m'en tenir à cette approche ! Merci beaucoup, Marko !
Que se passe-t-il si le premier formulaire de la page est caché dans ce cas ? Ou si le premier élément du formulaire est caché par le biais d'une feuille de style CSS ? Il est certain que cela échouerait. Je suis pédant, bien sûr, mais c'est ainsi que je fonctionne.
Dans mon cas (en ASP.NET), je n'ai qu'un seul formulaire qui n'est jamais caché. Cela fonctionne donc pour moi.
document.forms[0].elements[0].focus();Cette fonction peut être affinée à l'aide d'une boucle pour, par exemple, ne pas mettre l'accent sur certains types de champs, sur les champs désactivés, etc. L'idéal serait d'ajouter un class="autofocus" au champ que vous souhaitez mettre au point. faire veut se concentrer, et passe en boucle sur forms[i].elements[j] à la recherche de ce className.
Quoi qu'il en soit, ce n'est normalement pas une bonne idée de faire cela sur chaque page. Lorsque vous mettez au point une entrée, l'utilisateur perd la possibilité, par exemple, de faire défiler la page à partir du clavier. Si c'est inattendu, cela peut être ennuyeux, donc ne mettez le focus automatique que lorsque vous êtes sûr que l'utilisation du champ du formulaire sera ce que l'utilisateur veut faire, c'est-à-dire si vous êtes Google.
Si vous utilisez le Prototype JavaScript, vous pouvez utiliser l'outil focusFirstElement méthode :
Form.focusFirstElement(document.forms[0]); Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
7 votes
REMARQUE : si le formulaire est placé en bas de la page de manière à ce que l'utilisateur doive faire défiler la page pour voir le formulaire, la mise au point fera automatiquement défiler la page vers le bas, comme le ferait une ancre. Ce n'est pas très bon car l'utilisateur qui arrive sur cette page la verra immédiatement défiler vers le bas jusqu'à la position du formulaire. J'ai testé sur Safari et FF (IE7 ne fait pas défiler la page).
0 votes
@Marco_Demaio Mon application web est structurée de manière à ce que chaque page ait ses champs de saisie en haut de la fenêtre.
3 votes
Que se passe-t-il si l'utilisateur redimensionne la hauteur de la fenêtre du navigateur à quelque chose de plus petit que 768px. La page défilerait jusqu'à l'endroit où vous avez mis l'accent. Quoi qu'il en soit, je voulais simplement vous avertir au cas où vous ne seriez pas au courant de ce problème mineur, je ne l'étais pas non plus avant de faire quelques tests.