JavaScript: comment définir le focus dans chargement de la page

1 avril 2009

Vous avez ce formulaire de connexion dans votre jolie petite page d'accueil ... login-form

... Et vous voulez que les gens directement connexion dès qu'ils accéder au site.

Pour faciliter cela, vous avez mis en place un petit code JavaScript pour définir le focus automatiquement sur la zone de texte Nom d'utilisateur:

  onPageLoad function () 
  ( 
  document.form.username.focus (); 
  ) 

Il ya une mise en garde ici bien.

Habituellement programmeurs place leur code JavaScript dans le code HTML de telle sorte que le code est exécuté seulement après que tous les éléments de la page est chargée.

Maintenant, l'utilisateur accède à votre site, le chargement du formulaire de connexion, mais certains autres éléments dans la page de chargement sont encore.

L'utilisateur commence à taper le nom d'utilisateur, passe ensuite à remplir le mot de passe:

login-form-username

Votre page termine le chargement de maintenant, et le code JavaScript s'exécute et définit le focus à nom d'utilisateur de texte. L'utilisateur ne sait pas cela, il est encore en tapant le mot de passe.

login-form-pasword

Oops!

Le hic convivialité même peut se produire dans de nombreuses situations similaires impliquant l'action de l'utilisateur.

Dans cette situation spécifique, vous pouvez modifier le code pour quelque chose comme:

  onPageLoad function () 
  ( 
  if (document.form.username.value.length == 0) 
  ( 
  document.form.username.focus (); 
  ) 
  ) 

Vous pouvez aussi essayer d'exécuter le script dès que la forme complète d'affichage, mais pour autant que je sache, il n'existe pas de moyens fiables pour faire ces différents navigateurs, car la mise en œuvre des slideshows différemment. Même dans le navigateur même les choses fonctionnent de façon incohérente dans différents scénarios.

10 réponses à ce jour

  • Binny VA a écrit:

    Nice. Une autre méthode consiste à faire ...

    document.getElementById ("username"). focus ();

    Laid, mais en cours de validité.

  • Binny VA a écrit:

    En fait, il y avait une étiquette d'entrée avant que le script. Et un moine script ci-joint le code js - WP mais il a mangé.

  • Niyaz PK a écrit:

    C'est ce dont je parlais. Cela aurait été une bonne solution si cela a fonctionné de façon fiable. Malheureusement, il n'est pas toujours.

    Différents navigateurs exécuter le code JavaScript incorporé dans les différentes étapes de la charge document.

  • [...] Extrait de: JavaScript: comment définir le focus dans la page de chargement | [...] Diovo

  • Joyce a écrit:

    Ou utiliser jQuery

    $ (Document). Prêt (function () (
    $ ('# Nom d'utilisateur »). Focus ();
    ));

    La fonction de prêt est déclenché après le DOM est complètement chargé.

  • Niyaz PK a écrit:

    Joyce,

    Ouais. JQuery a fait soigneusement de sorte que vous n'avez pas à vous soucier de la implemetations navigateur de onLoad.

    Encore une fois, même si vous utilisez jQuery, vous devez utiliser l'if () condition de faire le focus () fonctionnent mieux le code. Ce fut le point de cet article.

  • Silky dit:

    Bonne idée. Ce qui m'a toujours dérangé.

  • Panthayi dit:

    Merci pour l'info dude.I pense does't Même Google le sait.

  • Niyaz PK a écrit:

    Soyeux, Panthayi,

    Je suis heureux que cela a aidé.

  • Ron a écrit:

    Quand nous ouvrons la page facebook, notez comment le texte de "courriel" sur le terrain est mis en surbrillance. Comme l'utilisateur tape dans son adresse e-mail il remplace ce texte. Toutes les idées sur la façon dont cela pourrait se faire?

Laisser un commentaire