autocomplete= off not working in chrome

Question

We are working on one web application in that one payment page is there.

In that we have two Text box one is for Credit Card Number and second one is for Verification Code and it type="Password".

Now problem is when page is load in google-chrome it found type="Password" it load Save email id in Credit Card Textbox and password in Verification Code.

Now try to solve this issue i was try out something like below.

<form autocomplete="off">

<asp:textbox autocomplete="off">

This above try is not work for me. i was googling it but by luck it's not work for me.

Could also be client side cache. Try setting the appropriate expiry headers on the page to prevent Chrome from loading the page from cache/memory. — HaukurHaf, Jul 24 '15 at 14:22
If your browser ignores autocomplete="off" adding a random string in place of 'off' will fix the issue. Eg, autocomplete="autocomplete_off_hack_xfr4!k" — Jp Silver, Jan 13 '22 at 17:28

score 22 · Accepted Answer · edited Sep 12 '21 at 02:26

It appears that Chrome now ignores autocomplete="off" unless it is on the <form autocomplete="off"> tag since v34.

you can't cheat by create an hidden input over. Auto complete feature will get the first input text to fill data.

Method 1:

<form id="" method="post" action="" autocomplete="off">
    <input type="text" style="display:none" />
    <input type="password" style="display:none">
    <asp:textbox autocomplete="off">
</form>

So put this before your textbox.

<input type="text" style="display:none" />

Method 2:

Change

autocomplete="off"

to

autocomplete="false"

Method 3: Browser autofill in by readonly-mode.

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

Method 4:

For username password combinations. Chrome heuristics looks for the pattern.

<input type="text" onfocus="this.type='password'">

Method 5: jQuery

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

Method 3 seems to be the most reliable and standardised across browsers — Radderz, Feb 27 '18 at 13:31
None of these methods works on Chrome for me. Version 94.0.4606.71 (Official Build) (64-bit) — Alexandre Martini, Oct 06 '21 at 21:35
Method 1 works for chrome, but I had to add name="username" and name="password" - of course my inputs have a different id of APIUsername/APIPassword - Chrome Version 109.0.5414.75 (Official Build) (64-bit) — J_sdev, Jan 18 '23 at 21:51

score 6 · Answer 2 · answered Jul 13 '21 at 17:35

This is the only solution that worked for me with both Autocomplete and Chrome's Autofill: It works also after calling new this.props.google.maps.places.Autocomplete

Add autocomplete="off" on the form tag.

Set autocomplete="none" directly on the input inside the form and set the attribute again on focus.

 <form autocomplete="off">
     <input type="text" autocomplete="none" onfocus="this.setAttribute('autocomplete', 'none');"/>
 </form>

This worked for me on latest Chrome version – Danish Muneer Aug 03 '22 at 02:34 — Danish Muneer, Aug 03 '22 at 02:34

score 1 · Answer 3 · answered Dec 21 '16 at 07:11

this is works if you want to keep white as your input background color

<input type="password" class="form-control" id="password" name="password" placeholder="Password" readonly onfocus="this.removeAttribute('readonly');" style="background-color: white;">

score 1 · Answer 4 · answered Jan 01 '20 at 11:19

1

use this solution

<input type="password" class="form-control auto-complete-off" id="password" name="password" autocomplete="new-password">

answered Jan 01 '20 at 11:19

Vahid Alvandi

588
9
17

score 1 · Answer 5 · edited Sep 13 '21 at 01:19

Chrome does not support autocomplete="off" at the form level for some input fields. There are 2 solutions to do so:

In your form, if only two or three fields ignore autocomplete="off", then use the field name itself as the autocomplete value. i.e. autocomplete=

<form:input type="text" id="name" path="name" autocomplete="name"/>

Instead of defining field name manually for each field, use a script for all text typed input at the loading of the page or after.

if ($.browser.chrome) { 
    $(document).on('focus click tap', 'input', function() {
        $(this).attr("autocomplete", 'block');
    });
} else {
    $(document).on('focus click tap', 'input', function() {
        $(this).attr("autocomplete", 'off');
    });
}

score 1 · Answer 6 · answered Nov 04 '21 at 16:38

this solution is no longer working in chrome 95 and above,

Try using a normal input with type text, disable copy and pasting then add a style with property -webkit-text-security to add character mask on typing

#Not that this css property is not universal as mentionned here https://developer.mozilla.org/fr/docs/Web/CSS/-webkit-text-security

score 0 · Answer 7 · edited Sep 11 '21 at 19:02

0

This works well and also compatible with MDL (Material Design Light):

// Fix chrome's ignore on autocomplete=off
$('input[autocomplete=off]').each(function(){
    var copy = $(this).clone();
    copy.val('');
    copy.removeAttr('autocomplete');
    copy.insertAfter($(this));
    $(this).hide().removeAttr('required id class');
});

edited Sep 11 '21 at 19:02

Flair

2,609
1
29
41

answered Aug 10 '15 at 11:31

Gabor

445
1
4
7

score 0 · Answer 8 · edited Sep 13 '21 at 15:30

0

automcomplete="off" or automcomplete="false"

or Define autocomplete inside Input field

$('input[name="password"]').attr('autocomplete', 'off');//Disable cache

edited Sep 13 '21 at 15:30

Flair

2,609
1
29
41

answered Aug 10 '15 at 11:35

score 0 · Answer 9 · edited Sep 15 '21 at 10:13

0

very simple, you can follow this

let elements = document.querySelectorAll('[autocomplete="off"]');
elements.forEach(element => {
    element.setAttribute("readonly", "readonly");
    element.style.backgroundColor = "inherit";
    setTimeout(() => {
        element.removeAttribute("readonly");
    }, 500);
})

edited Sep 15 '21 at 10:13

Flair

2,609
1
29
41

answered Sep 24 '20 at 05:41

Alauddin Afif Cassandra

481
6
10

score 0 · Answer 10 · edited Sep 13 '21 at 01:25

Is it not possible to use password type where text type is required?Regardless of the method presented above, Chrome unconditionally handles autocomplete if the name is the same. So, I used a method to randomly change the name like this.

$(document).on('focus click tap'
    , 'input[autocomplete][autocomplete!=""]:not([data-oname][data-oname!=""])'
    , function() {
    var oname = $(this).attr('name');
    var newName = "random string";  // random string
    $(this).attr({"data-oname":oname,"name":newName,autocomplete:newName});
    // A random string should be set for name and autocomplete above.
}).on('blur', 'input[data-oname][data-oname!=""]', function() {
    var oname = $(this).attr('data-oname');
    $(this).attr({"name":oname}).removeAttr('data-oname');
});

score 0 · Answer 11 · edited Sep 11 '21 at 18:40

0

This works:

$(document).ready(function () {

    setTimeout(() => {
        $('input').attr("readonly", 'readonly');
        $('input').attr("onfocus", "this.removeAttribute('readonly')");
    }, 100);
    
});

edited Sep 11 '21 at 18:40

Flair

2,609
1
29
41

answered Jul 31 '21 at 12:44

Praveen Soni

21
2

score 0 · Answer 12 · edited Sep 12 '21 at 06:57

0

This is how I solved the problem.

$("body").on('focus',':input', function (e) {
    $(this).attr('autocomplete', 'off');
    $(this).attr('autocapitalize', 'off');
    $(this).attr('autocorrect', 'off');
    $(this).attr('spellcheck', 'false');
});

OR

<input type="text" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false">

edited Sep 12 '21 at 06:57

Flair

2,609
1
29
41

answered Sep 10 '21 at 13:47

Yasin A.

1

score 0 · Answer 13 · answered Feb 19 '23 at 07:52

Use autocomplete="new-password" instead of autocomplete="off". This is a newer, more specific value for the autocomplete attribute, which indicates that the field is for a new password, rather than just any input. This can help prevent the browser from auto-filling the field with old passwords.

autocomplete= off not working in chrome

13 Answers13

Linked