web-dev-qa-db-fra.com

Comment éviter le focus automatique sur le premier champ de saisie lorsque vous ouvrez un formulaire HTML en tant que dialogue JQuery?

J'ai vu des questions similaires sur SO, y compris celui-ci , qui est vieux. J'ai lu et suivi des liens, mais il n'est pas clair s'il existe aujourd'hui une solution appropriée à ce problème.

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

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"); }
        }
    ] });
});
jqueryhtmlplaceholderautofocusinput-field
21
Jérôme Verstrynge

Une solution consiste à définir tabindex="-1" surTOUS LESchamps d'entrée pour que les espaces réservés HTML restent visibles.

5
Jérôme Verstrynge

Ce que j'ai fait, c'est que j'ai créé une entrée supplémentaire et l'ai rendue invisible (style="display:none"), puis lui a donné la propriété autofocus="true" et l'a placé à la fin du contenu de votre boîte de dialogue pour qu'il ne gache rien. ça devrait ressembler à ça:

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

Ajouter cette balise comme premier champ de saisie de la page me convient.

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

Pas besoin de javascript et conserve 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)

6
Mike

J'ai fini par faire ceci:

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

Vous pouvez utiliser jquery: 

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

Cela si vous avez du mal à trouver le bogue pour lequel la mise au point automatique est définie dans votre premier champ de saisie du formulaire. Veillez à insérer ce code avant la balise </body> body de fermeture de votre document.

1
Felix Jr