Utilizzare l'autocomplete in Chrome

Se vogliamo impostare l'autocomplete di un form a off, in modo che non visualizzi eventuali dati salvati, ci basta fare questo:

<form method="post" action="" autocomplete="off">
    <div>
        <label>Email:</label>
        <input type="email" name="email" value="" placeholder="Email">
    </div>
    <div>
        <label>Password:</label>
        <input type="password" name="password" value="">
    </div>
    <button type="submit" name="btn">Salva</button>
</form> 

Oppure possiamo impostarlo un campo specifico:

 <form method="post" action="">
    <div>
        <label>Email:</label>
        <input type="email" name="email" value="" placeholder="Email" autocomplete="off">
    </div>
    <div>
        <label>Password:</label>
        <input type="password" name="password" value="">
    </div>
    <button type="submit" name="btn">Salva</button>
</form> 

Il problema è che su Chrome (e Chromium) questo non funziona benissimo.

O almeno, a me non funziona bene ne su Linux ne su Windows ne su macOS.

Per ottenere il risultato possiamo usare un workaround in CSS e Javascript.

Questo il CSS:

.inp_read[readonly] { cursor: text;background-color: #fff; }

Questo invece il form:

<form method="post" action="" autocomplete="off">
    <div>
        <label>Email:</label>
        <input type="email" name="email" value="" placeholder="Email">
    </div>
    <div>
        <label>Password:</label>
        <input type="password" name="password" class="inp_read" value="" onfocus="this.removeAttribute('readonly');" autocomplete="off" readonly>
    </div>
    <button type="submit" name="btn">Salva</button>
</form> 

Come vedete abbiamo intercettato un evento sul campo che ci interessa, levando l'attributo readonly con Javascript.

In sostanza abbiamo "giocato" con l'attributo readonly.

Enjoy!