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?

— chris
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

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
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
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
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
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
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
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
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
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
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
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
source