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?

possible duplicate of [Is autocomplete="off" compatible with all modern browsers?](http://stackoverflow.com/questions/3868299/is-autocomplete-off-compatible-with-all-modern-browsers) — omma2289, Jul 02 '14 at 17:22

score 26 · Answer 1 · edited Nov 26 '19 at 17:10

26

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','');"/>

edited Nov 26 '19 at 17:10

Lawrence Dol

63,018
25
139
189

answered May 11 '16 at 05:45

AK Square Infomedia

277
3
6

1

that one did work. but it is very strange, that there is no support for this if I need to set password for some other stuff. – neoexpert Jul 17 '17 at 10:38
After hours & hours of searching finally I've found a working solution to prevent the form from being auto-filled by either the browser or 3rd party password managers. Thank you! – Ivan Nov 03 '18 at 08:39
I added an onblur handler; otherwise in FF 71, when you revisit the field it prompts you. – Lawrence Dol Nov 26 '19 at 17:11

score 13 · Answer 2 · answered May 24 '17 at 04:47

13

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"

answered May 24 '17 at 04:47

Raymond Morphy

2,464
9
51
93

1

autocomplete="new-password" also work for Firefox now (version 77.0.1) – blaze9 Jun 27 '20 at 16:14

score 7 · Answer 3 · answered Apr 03 '19 at 06:07

7

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>

answered Apr 03 '19 at 06:07

Amitabh Das

393
1
6
16

1

The auto-complete flag doesn't stop the password manager for prompting to fill the *username*. – Lawrence Dol Nov 26 '19 at 17:12
@LawrenceDol Which browser are you using? – Amitabh Das Nov 27 '19 at 04:47
Firefox, current. – Lawrence Dol Nov 28 '19 at 03:30
Have you tried the answer below by @Raymond Morphy ` My comment is relevant for the Chrome browser as the Question was for the chrome browser :) – Amitabh Das Nov 28 '19 at 10:55
No, because I used the [readonly on/off method](https://stackoverflow.com/a/37153976/8946). – Lawrence Dol Nov 28 '19 at 19:33
PS, there's really no legitimate SO answer that is for "Chrome only"; such an answer is useless to the vast majority who don't control the client's browser. – Lawrence Dol Nov 28 '19 at 19:34

score 3 · Answer 4 · answered Jul 02 '14 at 17:24

3

Simple: there's an HTML5 attribute called autocomplete.

Just set it to off.

<input autocomplete="off"/>

answered Jul 02 '14 at 17:24

AstroCB

12,337
20
57
73

4

This does not reliably work in Firefox. There's some discussion here http://stackoverflow.com/questions/6487970/disable-firefoxs-auto-fill – Jon Ewing Oct 09 '15 at 12:21
When you make your browser _remember_ your credentials, it will automatically fill the password trying to help you, even with `autocomplete="off"`. The `readonly` answer from **AK Square Infomedia** does work for those cases. Great for update profile forms where you usually only want the password sent through if it's changing. – Barnabas Kecskes May 13 '18 at 08:58
1

This also does not work in Chrome. Not sure why they add such nice and useful features to the HTML spec if the browsers don't bother to implement them. – Vincent Feb 23 '19 at 00:48

score 0 · Answer 5 · answered Nov 17 '21 at 22:47

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

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

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

score -1 · Answer 6 · answered Feb 22 '21 at 13:14

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

Stop browser from auto filling the form username and password fields

6 Answers6

Linked