Comment se concentrer sur un champ de texte de saisie de formulaire lors du chargement de la page à l'aide de jQuery?

238

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

javascript jquery html focus chris
la source
96
Nous ne nous occupons pas des questions simples ici.
DOK
Vérifiez la réponse de sohail arif sur le lien ci-dessous: stackoverflow.com/questions/18054459/…
Sohail Arif

Réponses:

378

Mettez l'accent sur le premier champ de texte:

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

Cela fait également le premier champ de texte, mais vous pouvez changer le [0] en un autre index:

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

Ou, vous pouvez utiliser l'ID:

$("#someTextBox").focus();
DOK
la source
2
Si vous utilisez une boîte de dialogue, veuillez voir cette réponse si ce qui précède ne fonctionne pas stackoverflow.com/a/20629541/966609
Matt Canty
1
$('input[type="text"]').get(0).focus(); ... a fonctionné pour moi
Rav
92

Vous pouvez utiliser HTML5autofocus pour cela. Vous n'avez pas besoin de jQuery ou d'un autre JavaScript.

<input type="text" name="some_field" autofocus>

Notez que cela ne fonctionnera pas sur IE9 et inférieur.

Andrew Liu
la source
l'autofocus ne fonctionne pas dans IE11 non plus stackoverflow.com/questions/34068302/…
BA TabNabber
Cela fonctionne pour mon scénario, mais la réponse sélectionnée ne l'a pas été pour une raison quelconque.
Vishnu YS
27

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>
Pandincus
la source
2
Je recommande d'apporter le script après l'élément html.
Ali Sheikhpour
1
Le script @AliSheikhpour est dans le wrapper prêt pour dom donc il n'a pas d'importance qu'il soit avant l'élément html, mais il ne devrait pas être en tête de toute façon.
Popnoodles
22

Pourquoi tout le monde utilise jQuery pour quelque chose de simple comme ça. 

<body OnLoad="document.myform.mytextfield.focus();">
TD_Nijboer
la source
15
Parce que la question est marquée comme jQuery.
Adarsh ​​Madrecha
18

Pensez à votre interface utilisateur avant de le faire. Je suppose (bien qu'aucune des réponses ne l'ait dit) que vous ferez cela lorsque le document se chargera à l'aide de la ready()fonction de jQuery . Si un utilisateur s'est déjà concentré sur un élément différent avant le chargement du document (ce qui est parfaitement possible), il est extrêmement irritant pour lui d'avoir le focus volé.

Vous pouvez vérifier cela en ajoutant des onfocusattributs dans chacun de vos <input>éléments pour enregistrer si l'utilisateur s'est déjà concentré sur un champ de formulaire et ne pas voler le focus s'il a:

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">
Tim Down
la source
2
Votre point de vue est non seulement techniquement correct, mais votre considération pour le meilleur UX possible est exquise. Bravo!
Folusho Oladipo
12

HTML:

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

jQuery:

$("#search").focus();
brendan
la source
1
si vous utilisez html5, ajoutez simplement un autofocusattribut à l'élément d'entrée?
Adarsh ​​Madrecha
Comment cet attribut est-il utilisé et deviendra-t-il l'élément ciblé dès que sa forme parent apparaîtra?
Khom Nazid
8

Désolé d'avoir heurté une vieille question. J'ai trouvé cela via google.

Il est également intéressant de noter qu'il est possible d'utiliser plusieurs sélecteurs, vous pouvez donc cibler n'importe quel élément de formulaire, et pas seulement un type spécifique.

par exemple.

$('#myform input,#myform textarea').first().focus();

Cela concentrera la première entrée ou zone de texte qu'il trouve, et bien sûr, vous pouvez également ajouter d'autres sélecteurs dans le mixage. Hnady si vous ne pouvez pas être certain qu'un type d'élément spécifique soit le premier, ou si vous voulez quelque chose d'un peu général / réutilisable.

Andrew Calder
la source
Excellente suggestion @Andrew.
DOK
6

Voici ce que je préfère utiliser:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>
poveilleux
la source
3
C'est une mauvaise façon de faire les choses, de se concentrer sur un <input> sur le chargement du document, utilisez simplement l' autofocusattribut fourni par HTML5
OverCoder
3

placer après entrée

<script type="text/javascript">document.formname.inputname.focus();</script>
Bill Marquis
la source
0

La manière la plus simple et la plus simple d'y parvenir

$('#button').on('click', function () {
    $('.form-group input[type="text"]').attr('autofocus', 'true');
});
Muhammad Owais
la source
0

La ligne $('#myTextBox').focus()seule ne place pas le curseur dans la zone de texte, utilisez plutôt:

$('#myTextBox:text:visible:first').focus();
David Sopko
la source