Prevent Browser From Autofill Password Fields

using readonly-attribute and remove it on focus (touch, tab, click)

by Daniel Suess

HTML

<h1>Prevent Chrome etc. from autofilling in password and login fields.</h1>
<h2>using readonly-attribute and remove it on focus (touch, tab, click)</h2>
<h2>(now with fix for mobile Safari to show virtual keyboard)</h2>
<form>
  <label for="email">E-Mail</label>
  <input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) { this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />
  <br/>
  <label for="pw">Password</label>
  <input id="pw" readonly type="password" onfocus="if (this.hasAttribute('readonly')) { this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />
  <br/>
  <input type="submit" value="Go!" />
</form>