Comment éviter la mise au point automatique sur le premier champ de saisie lors de la saisie d'un formulaire HTML en tant que boîte de dialogue JQuery?

J'ai vu des questions similaires, y compris cette unequi est l'ancien. J'ai lu et suivi les liens, mais il est difficile de savoir si il y a une solution adéquate à ce problème aujourd'hui.

Fond de mon problème, c'est que je suis en utilisant le HTML est placeholder="..." sur les champs de saisie. En se concentrant automatiquement sur le premier champ, son espace réservé n'est pas visible à l'utilisateur plus.

MODIFIER

Voici mon code HTML:

<div id='LOGIN_FORM' title="Login">
    <form action="">
        <input type="text" name="login_id" required="required"
                           placeholder="Enter user ID" /><br />
        <input type="password" name="login_pwd" required="required"
                           placeholder="Enter password" /><br />
    </form>
</div>

Voici mon code JS:

$("#login").click(function() { 
    $("#LOGIN_FORM").dialog({ modal: true }, { buttons: [
    {
            text: "Ok",
            click: function() { $(this).dialog("close"); }
        }
    ] });
});

source d'informationauteur Jérôme Verstrynge

  1. 15

    Ce que j'ai fait, j'ai créé un apport supplémentaire et rendu invisible (style="display:none") puis il a donné la propriété autofocus="true" mettre ceci à la fin de votre boîte de dialogue contenu alors il l'habitude de gâcher quoi que ce soit. il devrait ressembler à ceci:

            <div><!--dialog div-->
           <button></button>
           <button></button> 
          <input type="hidden" autofocus="true" />
        </div>
  2. 5

    J'ai fini par faire ceci:

    <input type="text" style="position: fixed; left: -10000000px;" disabled/>
  3. 2

    Une solution est de mettre en tabindex="-1" sur TOUS les champs de saisie pour garder HTML espaces réservés visible.

  4. 1

    Vous pouvez utiliser jquery: 

    jQuery(document).ready(function(e) {
   $('input[name="login_id"]').blur(); 
});

    Si vous trouvez qu'il est difficile de retracer le bug pourquoi l'autofocus est réglé dans votre premier champ de saisie du formulaire. Assurez-vous d'insérer ce code avant la fermeture </body> balise body de votre document.

  5. 1

    L'ajout de cette balise comme le premier champ de saisie sur la page fonctionne pour moi.

    <input type="text" autofocus="autofocus" style="display:none" />

    Pas besoin de javascript et maintient l'ordre de tabulation si vous souhaitez utiliser la touche tab pour vous déplacer à travers les champs.

    (Testé sur Chrome > 65, Firefox > 59 et Edge)

  6. -2

    Sans JQuery et JavaScript, nous pouvons donner une CSS seule solution.

    1. supprimer tous les plans de

      :focus {
    outline: 0;
}

    2. ajouter la nouvelle orientation du contour

      :link:focus, :visited:focus {
    outline: none;
}