Come evitare messa a fuoco automatica sul primo campo di ingresso quando schioccare un form HTML come un dialogo JQuery?
-
27-10-2019 - |
Domanda
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"); }
}
] });
});
Soluzione 4
Una soluzione è quella di impostare tabindex="-1"
su tutti i campi di input per mantenere i segnaposto HTML visibile.
Altri suggerimenti
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>
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)
ho finito per fare questo:
<input type="text" style="position: fixed; left: -10000000px;" disabled/>
È 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.
Senza JQuery e JavaScript, siamo in grado di dare una soluzione CSS-only.
-
rimuovere contorni tutti di messa a fuoco
:focus { outline: 0; }
-
aggiungere contorni della nuova messa a fuoco
:link:focus, :visited:focus { outline: none; }