Stop browser from auto filling the form username and password fields

Question

In the Chrome browser, I have saved the username and the password.

Now, if I navigate to some other form and it contains the username and password for some other stuff, the one I saved is auto-populated here.

How can I stop this?

Answer 1

When autocomplete=off would not prevent to fill in credentials, use following -

fix browser autofill in: readonly and set writeble on focus (click and tab).

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

Answer 2

For Fire fox browser use this:

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

For Chrome browser: use autocomplete="new-password"

Answer 3

Please refer to the following:
https://www.chromium.org/developers/design-documents/create-amazing-password-forms and https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands

Try the following :

<form id="login" action="signup.php" method="post">
    <input type="text" autocomplete="username">
    <input type="password" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
    <input type="submit" value="Sign Up!">
</form>

Answer 4

Simple: there's an HTML5 attribute calledautocomplete .

Just set it to off .

<input autocomplete="off"/>

Answer 5

First try to set the password field as

autocomplete="new-password"

The above solution should stop auto filling of both username & password

Note: Sometime setting up autocomplete="off" on username & password may not work

Answer 6

• For input/type=text, use a textarea
• For password, use a textarea with a circle glyph font (see https://stackoverflow.com/a/40982531/146457 )

<textarea required="required" autocorrect="off" autocapitalize="off" name="username" class="form-control" placeholder="Your username"  rows="1" cols="20" wrap="off"></textarea>
<textarea required="required" autocorrect="off" autocapitalize="off" name="password" class="form-control password" placeholder="Your password"  rows="1" cols="20" wrap="off"></textarea>

@font-face {
  font-family: 'password';
  src: url('css/font/password.woff2') format('woff2'),
       url('css/font/password.woff') format('woff'),
       url('css/font/password.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

textarea.form-control {
  overflow:hidden;
  resize:none;
  height:34px;
}

textarea.form-control.password:valid {
  font-family: 'password';
}

Notes

1. Textarea prevent autofill
2. wrap=off/overlow=hidden/rows=1 force one-line display
3. the required pseudo css make the placeholder works
4. You'll probably need some "prevent eventKey=13 / submit" thing
5. Works fine under ffox/chrome/iOS

In the end, it end up been a freaking webshit sum of hacks (but it works)