Comment définir automatiquement le focus sur une zone de texte lors du chargement d'une page Web?

Réponses:

245

Si vous utilisez jquery:

$(function() {
  $("#Box1").focus();
});

ou prototype:

Event.observe(window, 'load', function() {
  $("Box1").focus();
});

ou javascript simple:

window.onload = function() {
  document.getElementById("Box1").focus();
};

mais gardez à l'esprit que cela remplacera les autres gestionnaires de charge, alors recherchez addLoadEvent () dans Google pour un moyen sûr d'ajouter des gestionnaires de chargement plutôt que de les remplacer.

Ben Scheirman
la source
3
Pourquoi ne pas mettre des gestionnaires sur l'élément body? Une référence? Merci
Alexander Torstling
7
Parce qu'il est beaucoup plus propre de séparer le javascript du HTML. Vous devriez ajouter un comportement de script aux éléments visuels dans votre HTML.
Ben Scheirman
94

En HTML, il existe un autofocusattribut pour tous les champs de formulaire. Il y a un bon tutoriel à ce sujet dans Dive Into HTML 5 . Malheureusement, il n'est actuellement pas pris en charge par les versions IE inférieures à 10.

Pour utiliser l'attribut HTML 5 et revenir à une option JS:

<input id="my-input" autofocus="autofocus" />
<script>
  if (!("autofocus" in document.createElement("input"))) {
    document.getElementById("my-input").focus();
  }
</script>

Aucun gestionnaire jQuery, onload ou événement n'est requis, car le JS se trouve sous l'élément HTML.

Edit: un autre avantage est qu'il fonctionne avec JavaScript désactivé dans certains navigateurs et vous pouvez supprimer le JavaScript lorsque vous ne souhaitez pas prendre en charge les navigateurs plus anciens.

Edit 2: Firefox 4 prend désormais en charge l' autofocusattribut, laissant simplement IE sans support.

dave1010
la source
3
Qu'est-ce que c'est autofocus="aufofocus"? Tous les liens que vous avez fournies disent juste pour ajouter l'attribut: autofocus.
Gerrat
6
À l'époque du XHTML et du HTML4, il était courant de le faire attribute="value"pour les attributs booléens. HTML5 est venu avec la "syntaxe d'attribut vide" et nous avons abandonné la redondance. Maintenant, nous pouvons le faire<input checked disabled autofocus data-something>
dave1010
J'aime cette approche ... Ce code appartient à l'entrée ... Débarrassez-vous de l'entrée et boum, le code associé est juste là ... Nous nous perdons tellement ces jours-ci ... La boucle est bouclée maintenant en essayant de simplifier. ..
Serge
16

Vous devez utiliser javascript:

<BODY onLoad="document.getElementById('myButton').focus();">

@Ben note que vous ne devez pas ajouter de gestionnaires d'événements comme celui-ci. Bien que ce soit une autre question, il vous recommande d'utiliser cette fonction:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

Ensuite, appelez addLoadEvent sur votre page et référencez une fonction qui définit le focus sur la zone de texte souhaitée.

Espo
la source
14

Écrivez simplement l'autofocus dans le champ de texte. C'est simple et cela fonctionne comme ceci:

 <input name="abc" autofocus></input>

J'espère que cela t'aides.

Arjun
la source
1
c'est bien mais le problème est que si vous avez des étapes avec un style glissant, cela ne serait pas utile, surtout si le type d'entrée est à l'étape 3 ou à l'étape 4 pour ex
Kobe Bryan
12

Vous pouvez le faire facilement en utilisant jquery de cette manière:

<script type="text/javascript">

    $(document).ready(function () {
        $("#myTextBoxId").focus();
    });

</script>

en appelant cette fonction dans $(document).ready().

Cela signifie que cette fonction s'exécutera lorsque le DOM sera prêt.

Pour plus d'informations sur la fonction READY, consultez: http://api.jquery.com/ready/

Amir Chatrbahr
la source
11

Utilisation du html et du javascript vanille ordinaire

<input type='text' id='txtMyInputBox' />


<script language='javascript' type='text/javascript'>
function SetFocus()
{
    // safety check, make sure its a post 1999 browser
    if (!document.getElementById)
    {
        return;
    }

    var txtMyInputBoxElement = document.getElementById("txtMyInputBox");

    if (txtMyInputBoxElement != null)
    {
        txtMyInputBoxElement.focus();
    }
}
SetFocus();
</script>

Pour ceux qui utilisent le framework .net et asp.net 2.0 ou supérieur, c'est trivial. Si vous utilisez des versions plus anciennes du framework, vous devrez écrire du javascript similaire à ci-dessus.

Dans votre gestionnaire OnLoad (généralement page_load si vous utilisez le modèle de page stock fourni avec Visual Studio), vous pouvez utiliser:

C #

protected void PageLoad(object sender, EventArgs e)
{
    Page.SetFocus(txtMyInputBox);
}

VB.NET

Protected Sub PageLoad(sender as Object, e as EventArgs)

    Page.SetFocus(txtMyInputBox)

End Sub

(* Notez que j'ai supprimé le caractère de soulignement du nom de la fonction qui est généralement Page Load, car dans un bloc de code, il a refusé de s'afficher correctement! Je ne pouvais pas voir dans la documentation de balisage comment obtenir des traits de soulignement pour rendre sans échappement.)

J'espère que cela t'aides.

Jon
la source
7

À mon humble avis, le moyen le plus `` propre '' de sélectionner le premier champ de texte visible et activé sur la page consiste à utiliser jQuery et à faire quelque chose comme ceci:

$(document).ready(function() {
  $('input:text[value=""]:visible:enabled:first').focus();
});

J'espère que cela pourra aider...

Merci...

relancer
la source
6 
<html>  
<head>  
<script language="javascript" type="text/javascript">  
function SetFocus(InputID)  
{  
   document.getElementById(InputID).focus();  
}  
</script>  
</head>  
<body onload="SetFocus('Box2')">  
<input id="Box1" size="30" /><br/>  
<input id="Box2" size="30" />  
</body>  
</html>
Joël Coehoorn
la source
5

En règle générale, je recommanderais de ne pas voler le focus de la barre d'adresse. ( Jeff en a déjà parlé. )

La page Web peut prendre un certain temps à se charger, ce qui signifie que votre changement de focus peut se produire longtemps après que l'utilisateur a tapé l'URL pae. Ensuite, il aurait pu changer d'avis et revenir à la saisie d'url pendant que vous chargerez votre page et volerez le focus pour la mettre dans votre zone de texte.

C'est la seule et unique raison qui m'a poussé à supprimer Google comme page de démarrage.

Bien sûr, si vous contrôlez le réseau (réseau local) ou si le changement d'orientation est de résoudre un problème d'utilisation important, oubliez tout ce que je viens de dire :)

Vincent Robert
la source
Je suis d'accord avec vous dans certains cas. Cependant, dans mon cas particulier, je fais apparaître un petit div qui n'a qu'une seule zone de saisie. L'utilisateur est censé entrer quelque chose et fermer immédiatement le div, il est donc pratique de définir le focus.
Mark Biek
2

J'ai eu un problème légèrement différent. Je voulais autofocus, mais je voulais que le placeholdertexte reste, cross-browser. Certains navigateurs masqueraient le placeholdertexte dès que le champ était focalisé, d'autres le garderaient. J'ai dû soit faire en sorte que les espaces réservés restent inter-navigateurs, ce qui a des effets secondaires étranges, ou arrêter d'utiliser autofocus.

J'ai donc écouté la première clé tapée contre la balise body et redirigé cette clé dans le champ de saisie cible. Ensuite, tous les gestionnaires d'événements impliqués sont tués pour garder les choses propres.

var urlInput = $('#Url');

function bodyFirstKey(ev) {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);

    if (ev.target == document.body) {
        urlInput.focus();
        if (!ev.ctrlKey && !ev.metaKey && !ev.altKey) {
            urlInput.val(ev.key);
            return false;
        }
    }
};
function urlInputFirstFocus() {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);
};

$('body').keydown(bodyFirstKey);
urlInput.focus(urlInputFirstFocus);

https://jsfiddle.net/b9chris/qLrrb93w/

Chris Moschini
la source
0

Il est possible de définir autofocussur les éléments d'entrée

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">
Oscar Castellon
la source
-1

Si vous utilisez ASP.NET, vous pouvez utiliser

yourControlName.Focus()

dans le code sur le serveur, ce qui ajoutera le JavaScript approprié dans la page.

D'autres frameworks côté serveur peuvent avoir une méthode équivalente.

Andrew Morton
la source
-3

Utilisez le code ci-dessous. Pour moi ça marche

jQuery("[id$='hfSpecialty_ids']").focus()
srikanth
la source