web-dev-qa-db-fra.com

Comment se concentrer sur un champ de saisie de formulaire lors du chargement de page avec jQuery?

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?

javascriptjqueryhtmlfocus
212
chris

Activer le premier champ de texte:

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

Cela fait aussi 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();
333
DOK

Vous pouvez utiliser HTML5 autofocus pour cela. Vous n'avez pas besoin de jQuery ou autre JavaScript. 

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

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

74
Andrew Liu

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>
26
Pandincus

Pourquoi tout le monde utilise jQuery pour quelque chose d'aussi simple que cela. 

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

Pensez à votre interface utilisateur avant de le faire. Je suppose (bien qu'aucune des réponses ne l'ait dit) que vous fassiez cela lorsque le document sera chargé à l'aide de la fonction ready() 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 de se voir dérober la mise au point.

Vous pouvez vérifier cela en ajoutant des attributs onfocus dans chacun de vos éléments <input> pour indiquer si l'utilisateur s'est déjà concentré sur un champ de formulaire et ne pas ensuite voler le focus s'ils ont:

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">
18
Tim Down

HTML:

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

jQuery:

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

Désolé d'avoir posé 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 va focaliser la première entrée ou la première zone de texte trouvée, et bien sûr vous pouvez aussi ajouter d’autres sélecteurs. Hnady si vous ne pouvez pas être certain d’un type d’élément spécifique en premier, ou si vous voulez quelque chose d’un peu général/réutilisable.

8
Andrew Calder

Voici ce que je préfère utiliser:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>
5
SynD

placer après l'entrée

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

Le moyen le plus simple et le plus simple d'y parvenir

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

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

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