Comment définir automatiquement le focus sur une zone de texte lorsque une page web se charge?

Question

Comment définir automatiquement le focus sur un champ de texte lors du chargement d'une page web?

Y a-t-il une balise HTML pour le faire ou cela doit-il être fait via Javascript?

Answer 1

Si vous utilisez jquery:

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

ou prototype:

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

ou du javascript pur:

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

gardez à l'esprit que cela remplacera d'autres gestionnaires d'événements au chargement, donc recherchez addLoadEvent() sur Google pour une manière sûre d'ajouter des gestionnaires d'événements au chargement au lieu de les remplacer.

Answer 2

En HTML, il existe un attribut autofocus pour tous les champs de formulaires. Il y a un bon tutoriel à ce sujet dans Dive Into HTML 5. Malheureusement, il n'est actuellement pas supporté par les versions d'IE inférieures à 10.

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

  if (!("autofocus" in document.createElement("input"))) {
    document.getElementById("my-input").focus();
  }

Aucune jQuery, aucun gestionnaire d'événements n'est requis, car le JS est situé en dessous de l'élément HTML.

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

Édition 2 : Firefox 4 prend désormais en charge l'attribut autofocus, laissant simplement IE sans support.

Answer 3

Vous devez utiliser javascript :

---

@Ben note que vous ne devriez pas ajouter des gestionnaires d'événements de cette manière. Bien que cela soit une autre question, il 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, ajoutez un appel à addLoadEvent sur votre page et référencez une fonction qui définisse le focus sur votre zone de texte souhaitée.

Answer 4

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

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

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, veuillez consulter : http://api.jquery.com/ready/

Answer 5

Utilisation de html et javascript vanilla

function SetFocus()
{
    // vérification de sécurité, assurez-vous qu'il s'agit d'un navigateur post-1999
    if (!document.getElementById)
    {
        return;
    }

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

    if (txtMyInputBoxElement != null)
    {
        txtMyInputBoxElement.focus();
    }
}
SetFocus();

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 un peu de javascript similaire ci-dessus.

Dans votre gestionnaire OnLoad (généralement page_load si vous utilisez le modèle de page 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)

(* Note j'ai enlevé le caractère souligné du nom de la fonction qui est généralement Page_Load puisqu'il refusait de se rendre correctement dans un bloc de code! Je n'ai pas trouvé dans la documentation du balisage comment obtenir les soulignements se rendre non échappés.)

J'espère que cela vous aidera.