Come evitare messa a fuoco automatica sul primo campo di ingresso quando schioccare un form HTML come un dialogo JQuery?

Question

ho visto domande simili su SO, tra cui questo , che è vecchio. Ho letto e seguito i link, ma non è chiaro se ci sia una soluzione adeguata a questo problema oggi.

Il mio problema di fondo è che io sto usando placeholder="..." del HTML sui campi di input. Mettendo a fuoco automaticamente sul primo campo, il suo segnaposto non è visibile all'utente più.

Modifica

Ecco il mio codice 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>

Ecco il mio codice JS:

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

Answer 1

Una soluzione è quella di impostare tabindex="-1" su tutti i campi di input per mantenere i segnaposto HTML visibile.

Answer 2

Quello che ho fatto è stato ho creato un input in più e ne ha fatto invisibile (style="display:none"), poi ha dato la autofocus="true" proprietà ha messo questo alla fine del suo sito web dialogo in modo che pasticcio solito con qualsiasi cosa. esso dovrebbe assomigliare a questa:

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

Answer 3

L'aggiunta di questo tag come il primo campo di input nella pagina funziona per me.

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

Non c'è bisogno di javascript e mantiene l'ordine di tabulazione, se si desidera utilizzare il tasto Tab per spostarsi tra i campi.

(Testato su Chrome> 65, Firefox> 59 ed Edge)

Answer 4

ho finito per fare questo:

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

Answer 5

È possibile utilizzare jQuery:

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

Questo se si fatica a rintracciare il bug per cui messa a fuoco automatica è impostato nel vostro primo campo di input del modulo. Assicurati di inserire questo codice prima del tag di chiusura corpo </body> del documento.

Answer 6

Senza JQuery e JavaScript, siamo in grado di dare una soluzione CSS-only.

1. rimuovere contorni tutti di messa a fuoco

   :focus {
       outline: 0;
   }
   

2. aggiungere contorni della nuova messa a fuoco

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