Disable form autofill in Chrome without disabling autocomplete [duplicate]

Here's the magic you want:

    autocomplete="new-password"

Chrome intentionally ignores autocomplete="off" and autocomplete="false". However, they put new-password in as a special clause to stop new password forms from being auto-filled.

I put the above line in my password input, and now I can edit other fields in my form and the password is not auto-filled.

A little late, but here's my fool proof solution useful for pages like the sign up/registration page where the user has to input a new password.

<form method="post">    <input type="text" name="fname" id="firstname" x-autocompletetype="given-name" autocomplete="on">    <input type="text" name="lname" id="lastname" x-autocompletetype="family-name" autocomplete="on">    <input type="text" name="email" id="email" x-autocompletetype="email" autocomplete="on">    <input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;">    <input type="password" name="password" id="password" autocomplete="off"></form>

Chrome will detect two password inputs and will not auto fill the password fields. However, the field id="password_fake" one will be hidden via CSS. So the user will only see one password field.

I've also added some extra attributes "x-autocompletetype" which is a chrome experimental specific auto fill feature. From my example, chrome will autofill in the first name, last name and email address, and NOT the password field.

Fix: prevent browser autofill in

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

Update:Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:

<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();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

ExplanationInstead of filling in whitespaces or window-on-load functions this snippet works by setting readonly-mode and changing to writable if user focuses this input field (focus contains mouse click and tabbing through fields).

No jQuery needed, pure JavaScript.