Comment éviter mise au point automatique sur le premier champ de saisie lorsque popping un formulaire HTML comme une boîte de dialogue de JQuery?

Question

J'ai vu des questions similaires sur le SO, y compris celui-ci , qui est vieux. J'ai lu et suivi des liens, mais on ne sait pas s'il y a une solution appropriée à cette question aujourd'hui.

Mon problème de fond est que j'utilise le placeholder="..." de HTML sur les champs de saisie. En se concentrant automatiquement sur le premier champ, son espace réservé n'est pas visible à l'utilisateur plus.

EDIT

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"); }
        }
    ] });
});

Answer 1

Une solution est de mettre tabindex="-1" sur ALL champs d'entrée pour garder des espaces réservés HTML visible.

Answer 2

Ce que je l'ai été, j'ai créé une entrée supplémentaire et fait invisible (style="display:none"), il a donné la propriété autofocus="true" mis cela à la fin de votre contenu de dialogue de sorte qu'il désordre coutume avec quoi que ce soit. il devrait ressembler à ceci:

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

Answer 3

L'ajout de cette balise comme le premier champ d'entrée 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 de tabulation pour vous déplacer dans les champs.

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

Answer 4

J'ai fini par faire ceci:

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

Answer 5

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 autofocus est défini dans votre premier champ du formulaire d'entrée. Assurez-vous d'insérer ce code avant la balise body de </body> de clôture de votre document.

Answer 6

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

1. supprimer le contour de tous les focus

   :focus {
       outline: 0;
   }
   

2. ajouter le contour de la nouvelle mise au point

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