280 votes

Comment mettre l'accent sur un champ de saisie de formulaire au chargement de la page à l'aide de jQuery ?

C'est probablement très simple, mais quelqu'un pourrait-il me dire comment faire clignoter le curseur sur une zone de texte au chargement de la page ?

106 votes

Les questions simples ne nous dérangent pas ici.

0 votes

Vérifiez la réponse de Sohail Arif sur le lien ci-dessous : stackoverflow.com/questions/18054459/

429voto

DOK Points 21175

Mettez l'accent sur le premier champ de texte :

 $("input:text:visible:first").focus();

Cette méthode s'applique également au premier champ de texte, mais vous pouvez remplacer le [0] par un autre indice :

$('input[@type="text"]')[0].focus(); 

Ou bien, vous pouvez utiliser l'ID :

$("#someTextBox").focus();

2 votes

Si vous utilisez une boîte de dialogue, veuillez consulter cette réponse si la réponse ci-dessus ne fonctionne pas. stackoverflow.com/a/20629541/966609

1 votes

$('input[type="text"]').get(0).focus(); ...a fonctionné pour moi

29voto

Pandincus Points 5785

Bien sûr :

<head>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#myTextBox").focus();
        });
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>

3 votes

Je recommande d'amener le script après l'élément html.

1 votes

@AliSheikhpour script est dans le wrapper dom ready donc cela n'a pas d'importance qu'il soit avant l'élément html, mais il ne devrait pas être dans head de toute façon.

21voto

TD_Nijboer Points 182

Pourquoi tout le monde utilise-t-il jQuery pour une chose aussi simple que celle-ci ?

<body OnLoad="document.myform.mytextfield.focus();">

24 votes

Parce que la question est étiquetée comme jQuery.

19voto

Tim Down Points 124501

Pensez à votre interface utilisateur avant de faire cela. Je suppose (bien qu'aucune des réponses ne l'ait précisé) que vous ferez cela au moment du chargement du document en utilisant la fonction jQuery ready() fonction. Si un utilisateur s'est déjà concentré sur un autre élément avant le chargement du document (ce qui est parfaitement possible), il est extrêmement irritant pour lui de se voir voler la vedette.

Vous pouvez vérifier cela en ajoutant onfocus dans chacun de vos <input> afin d'enregistrer si l'utilisateur s'est déjà concentré sur un champ du formulaire et, le cas échéant, de ne pas lui voler la vedette :

var anyFieldReceivedFocus = false;

function fieldReceivedFocus() {
    anyFieldReceivedFocus = true;
}

function focusFirstField() {
    if (!anyFieldReceivedFocus) {
        // Do jQuery focus stuff
    }
}

<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">

2 votes

Votre point de vue est non seulement techniquement correct, mais votre considération pour la meilleure UX possible est exquise. Bravo !

13voto

brendan Points 15097

HTML :

  <input id="search" size="10" />

jQuery :

$("#search").focus();

1 votes

Si vous utilisez html5, ajoutez simplement autofocus à l'élément d'entrée ?

0 votes

Comment cet attribut est-il utilisé, et deviendra-t-il l'élément ciblé dès que son formulaire parent apparaîtra ?

Prograide.com

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.

Powered by:

X