Chrome - Vuoi salvare questa password? prompt di ottenere il valore errato

Question

Ho un modulo che consente agli utenti di richiedere un account su un sito Web privato, ma non esiste un campo Nome utente. Invece, le specifiche per questo progetto richiedono all'utente l'inserimento del proprio indirizzo e-mail e password/conferma password. Ci sono anche campi che consentono all'utente di inserire il proprio stato e il proprio paese.

Quando il modulo viene inviato, Chrome visualizza un messaggio che chiede se l'utente desidera salvare la password, ma sta visualizzando il valore del campo stato invece del campo Indirizzo email. (L'indirizzo e-mail è il nome utente effettivo dell'account).

Comprendo che Chrome attraverserà i campi di un modulo finché non trova un campo con id = password, quindi attraverserà i campi indietro per trovare id = nome utente. Poiché non ho un campo id = username e Chrome non si riferisce a id = email, sembra che stia usando il campo immediatamente prima del campo id = password per il nome utente.

Come posso forzare Chrome a utilizzare il campo con id = email per il nome utente?

<form action="POST" src="#"> 
    <input id="email" type="text" /> 
    <input id="state" type="text" /> 
    <input id="country" type="text" /> 
    <input id="password" type="password" /> 
    <input id="confirmpassword" type="password" /> 

    <input type="submit" value="Request Account" /> 
</form> 

Quando presentato, il modulo di cui sopra innesca Chrome a richiesta:

Would you like to save this password? 

Iowa    ******** 

nota che 'Iowa' è qualsiasi valore viene digitato nel campo id = stato, che ovviamente è sbagliato.

A questo punto sarebbe difficile modificare id = email in id = nome utente. C'è un modo alternativo per farlo e mantenere id = email?

Answer 1

Sembra che ci sia solo una soluzione a questo problema. Rinominare id="email" a id="username" non risolve il problema neanche. Sembra che non importa circa l'identità o l'etichetta, i browser utilizzano il campo immediatamente precedente il campo id="password" come il nome utente e così ho spostato i due campi insieme, in questo modo:

<form action="POST" src="#"> 
    <input id="state" type="text" /> 
    <input id="country" type="text" /> 
    <input id="email" type="text" /> 
    <input id="password" type="password" /> 
    <input id="confirmpassword" type="password" /> 

    <input type="submit" value="Request Account" /> 
</form> 

se qualcuno sa come posso specificare il campo utilizzato come username nel prompt della password di salvataggio del browser (indipendentemente dal posizionamento del campo del modulo) Gradirei il puntatore!

Answer 2

Ho avuto lo stesso problema. Risolto mettendo un campo nascosto (con display: none) prima che la password e il caricamento con il Real login valore del campo:

<input type="text" name="user.loginId" id="new-loginId" tabindex="1" class="form-control" placeholder="Nome de usuário" value="${user.loginId}"> 
<input type="text" name="user.name" id="new-name" tabindex="2" class="form-control" placeholder="Nome completo" value="${user.name}"> 
<input type="text" id="browser-friendly-login-field-location" value="${user.loginId}" style="display:none"/> 
<input type="password" name="user.password" id="new-password" tabindex="3" class="form-control" placeholder="Senha" oninput="checkPasswords(false);" onkeydown="checkPasswords(false);" onchange="checkPasswords(false);"> 
<input type="submit" onclick="$('#browser-friendly-login-field-location').val($('#new-loginId').val());"/> 

Answer 3

soluzione di Guilherme display: none non ha funzionato per me, così ho applicato la seguente classe CSS sul campo di accesso in più:

.Login--hidden { 
    height: 1px; 
    position: absolute; 
    top: -1px; 
    left: 0; 
    width: 1px; 
} 

ho anche dovuto aggiungere tabindex="-1" all'elemento, di tirarla fuori della scheda-flow.

Ancora non è l'ideale.

Answer 4

Im in esecuzione sullo stesso problema qui.digitato (Leggi altrove e testato) che in chrome e in chrome solo è possibile impostare autocomplete="username" nel campo di posta elettronica. E questo permetterà al browser di sapere qual è il campo del nome utente corretto. Tuttavia questo funziona solo per Chrome, quindi non sto usando questa soluzione