CODEWITHSUNDEEP
htmlgoogle-chromeautocompleteforms
Mr Fett
Mr Fett

Reputation: 8529

Chrome ignores autocomplete="off"

I've created a web application which uses a tagbox drop down. This works great in all browsers except Chrome browser (Version 21.0.1180.89).

Despite both the input fields AND the form field having the autocomplete="off" attribute, Chrome insists on showing a drop down history of previous entries for the field, which is obliterating the tagbox list.

Upvotes: 760

Views: 719661

Answers (30)

Nandu
Nandu

Reputation: 187

Use autocomplete="one-time-code"

Upvotes: 0

Jon Freynik
Jon Freynik

Reputation: 369

I had success with the following UGLY hack:

  1. Convert the "username and password" <input> fields to <textarea> fields

  2. Set both the rows="1" property and the resize:none; style property on them and style them with CSS to match the look and feel of your input fields.

  3. Add the following CSS properties to the password field to mask the input properly:

style="-webkit-text-security: disc; -moz-text-security: disc; text-security: disc;"

In my case, the browser then ignores them. I'm not sure how long this hack will work.

Here's a full example of it working:

<form method="POST">

<label>
  <div>Username:</div>
  <textarea
    placeholder="Your Username"
    name="username"
    rows="1"
    style="resize: none;"
  ></textarea>
</label>

<label>
  <div>Password:</div>
  <textarea
    placeholder="Your Password"
    name="password"
    rows="1"
    style="resize: none; -webkit-text-security: disc; -moz-text-security: disc; text-security: disc;"
  ></textarea>
</label>

<br />

<button type="submit">Login</button>

</form>

Upvotes: 0

bdroid
bdroid

Reputation: 614

2024

Using Jquery:

'use strict';
$(document).ready(function(){
    var inputs = $('input.autocomplete_off');
    inputs.each(function() {
        $(this).attr('readonly');
    });
});

'use strict';
$(document).ready(function(){
    $('.autocomplete_off').on('click', function(){
        $(this).removeAttr('readonly')
    })
});

How to use?

<input class="autocomplete_off"></input>

Upvotes: 0

Carlos Guerra
Carlos Guerra

Reputation: 34

It seems that the Chrome autocomplete event is triggered on DOMContentLoaded, and in the lastest version of Chrome (110.0.5481.178) now ignores autocomplete="nope" and autocomplete="new-password" or random attribute, so if you don't want to use the readonly trick or other JQuery and Js randomness things you can just set the inputs (email, password and tel mainly) to text and in the load event just re-set to the correct type, this should be at least 1ms after the load event because if it's done immediately it will be autocompleted by the browser, so just do this trick:

Set the input to type to "text" and store the real type on some attribute or class like whis:

<input type="text" id="infoEmail" placeholder="[email protected]" data-on-load-type="email">

Then, in the window load event use the setTimeout function and it's done, the input will have the right type and won't be autocomplete

window.addEventListener('load', ()=>{
    document.querySelectorAll('input[data-on-load-type]').forEach(trickedInput=>{
        trickedInput.setAttribute('type', trickedInput.getAttribute('data-on-load-type'))
    });
});

Edit: just want to add more info about how the autocomplete seems to work.

The autocomplete happens most of the time when are a password and at least other input element in the DOM, the browser will treat everything posssible as a autocompletable, even if theese aren't in a <form> tag or has the autocomplete atribute to nope or new-password, so if a password input is found and any other autocompletable input such as email, tel or adress thoose will be autocomplete, but not if they have a display: none; so the browser will try to fill anyways any other input element visible, even if is not related to a contact or login form, like a input search on a search bar, and if you have a script to display the inputs sometimes they will be autocompleted if an input password is on the DOM, so this is a big problem and browsers should respect when something shouldn't be autocomplete. So, once the browser knows that there's a input password on the DOM it seems to attach a listenner to autocomplete inputs when they change their display, so i found this solution by setting the type to text, and then changing it to the correct type with a little delay after the load event, it seems to work pretty well, for now.

Upvotes: 1

CodingGoneWrong
CodingGoneWrong

Reputation: 207

Update 08/2022:

I managed to get autocomplete to be respected by including

autocomplete="new-password"

on each individual input element regardless of type.

E.g.

<input id="email" type="email" autocomplete="new-password"/>

Upvotes: 14

Tony
Tony

Reputation: 550

The only solution that worked and tested successfully on Chrome and Firefox is to wrap the input with a form that has autocomplete="off" as per below:

<form autocomplete="off">
   <input id="xyz" />
</form>

Upvotes: 3

step
step

Reputation: 2410

Always working solution

I've solved the endless fight with Google Chrome with the use of random characters. When you always render autocomplete with random string, it will never remember anything.

<input name="name" type="text" autocomplete="rutjfkde">

Hope that it will help to other people.

Update 2022:

Chrome made this improvement: autocomplete="new-password" which will solve it but I am not sure, if Chrome change it again to different functionality after some time.

Upvotes: 56

Vinnie Amir
Vinnie Amir

Reputation: 621

I have a VERY simple solution to this problem no code required and an acceptable solution. Chrome often reads the label of the input and does AutoComplete. You can simply insert an "empty" character into the label.

E.g. <label>Surname</labe>

Becomes: <label>Sur&#8205;name</label>

‍ is the HTML escape character for "Empty string".

This will still show "Surname" but the Autocomplete wont detect the field and try autocompleting it.

Upvotes: 3

user3389
user3389

Reputation: 489

I found a solution that works for me. It doesn't disable autocomplete but allows to customize it. Tested in Chrome 96, Opera 82

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: none;
    border-bottom: 1px solid;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
}

Upvotes: -1

Mehrad Moein
Mehrad Moein

Reputation: 423

I ran into this problem lately and non of the answers worked for me. In my case, as I didn't care for the input field to be nested inside a "form" tag, I fixed chrome autocomplete problem by providing an empty datalist to the input. So now chrome should provide you with autocomplete suggestions from the "datalist" which is empty. Have in mind that this solution does not work if the input is nested in a "form" tag. Surprisingly nothing else worked for me but this trick.

<input type="text" autocomplete="off" list="emptyList" />
<datalist id="emptyList"></datalist>

You can learn more about data lists here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

Considering browser compatibility, it seems to be safe to use.

Upvotes: 0

Naren
Naren

Reputation: 4480

Quick hack, Incase if you still getting the autocomplete even though reading above answers, you can try this. Giving random string will remove the autocomplete.

<input autocomplete="somerandomstring" or autocomplete="disabled">

Idk is it right way or not, It just worked for me.

Upvotes: 7

chrisbergr
chrisbergr

Reputation: 198

I had to adress this issue on a drupal page with a huge webform. Because I can not edit the html code of every input, I came up with the following generic jQuery solution.

<script>

    // Form Autocomplete FIX
    function is_mobile() {
        if( screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ) {
            return true;
        }
        return false;
    }
    jQuery( 'input[autocomplete="off"]' ).each( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).attr( 'readonly', true );
    } );
    jQuery( 'input[autocomplete="off"]' ).focus( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).removeAttr( 'readonly' );
        jQuery( this ).focus();
    } );
    jQuery( 'input[autocomplete="off"]' ).blur( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).attr( 'readonly', true );
    } );

</script>

Browser detection from here.

I guess there is a possibility to optimize this code (I'd love to get some advice), but you'll get the idea from it.

Upvotes: -1

minigeek
minigeek

Reputation: 3166

Writing a 2020+ answer in case if this helps anyone. I tried many combinations above, though there is one key that was missed in my case. Even though I had kept autocomplete="nope" a random string, it didn't work for me because I had name attribute missing!

so I kept name='password' and autocomplete = "new-password"

for username, I kept name="usrid" // DONT KEEP STRING THAT CONTAINS 'user'

and autocomplete = "new-password" // Same for it as well, so google stops suggesting password (manage password dropdown)

this worked very well for me. (I did this for Android and iOS web view that Cordova/ionic uses)

<ion-input [type]="passwordType" name="password" class="input-form-placeholder" formControlName="model_password"
        autocomplete="new-password" [clearInput]="showClearInputIconForPassword">
</ion-input>

Upvotes: 10

Danish Memon
Danish Memon

Reputation: 301

None of these methods work anymore, chrome ignores all of these attributes, the only solution is to use jquery

use this on input

<input onclick="$(this).removeAttr('readonly');" onblur="$(this).attr('readonly', true);" readonly />

Upvotes: 1

LordZyx
LordZyx

Reputation: 156

I just find a trick:

<input type="password" id="some_id" name="some_name" value=" " placeholder="Password">

<script>
 $(function)
 {
    $("#some_id").val("");
 }
</script>

note that value is blank space. It prevents autompiling in Chrome and input field shows placeholder.

Upvotes: 0

Milan Tenk
Milan Tenk

Reputation: 2715

2021 September Answer

As I had to deal with this issue the only stable working solution was to generate a random string for name and autocomplete attribute in the <input> elements each time when the website is rendered.

A simple demo for this using pure JavaScript is below.

Html:

<div>
     <h3>Autofill disabled with random string</h3>
     <form id="disable-autofill-form">
       <div>
         <span>First Name</span>
         <input type="text" />
       </div>
       <div>
         <span>Last Name</span>
         <input type="text" />
       </div>
       <div>
         <span>City</span>
         <input type="text" />
       </div>
       <div>
         <span>Street</span>
         <input type="text" />
       </div>
       <div>
         <span>Postal Code</span>
         <input type="text" />
       </div>
     </form>
</div>

JavaScript:

const randomString = (Math.random() + 1).toString(36).substring(5);
const disableAutoFillForm = document.getElementById('disable-autofill-form');
const disableAutoFillFormInputs = [
  ...disableAutoFillForm.getElementsByTagName('input'),
];
disableAutoFillFormInputs.forEach((input) => {
  input.setAttribute('autocomplete', randomString);
  input.setAttribute('name', randomString);
});

A Stackblitz project to play around with it can be found here.

Upvotes: 0

Mr Fett
Mr Fett

Reputation: 8529

to anyone looking for a solution to this, I finally figure it out.

Chrome only obey's the autocomplete="off" if the page is a HTML5 page (I was using XHTML).

I converted my page to HTML5 and the problem went away (facepalm).

Upvotes: 9

sumanta.k
sumanta.k

Reputation: 527

Basically we can get rid of the autocomplete from any textbox from chrome, firefox or any kind of browsers. It's simple javascript.

window.onload=function(){                                              
        setTimeout(function(){  
            document.getElementById('username').value = '';
            document.getElementById('password').value = '';
        },100);
    }

When your window is finish loading, after 100 milliseconds our username and password fields value going to delete. I think it is the best way to do autocomplete off on all browsers (Specially for chrome).

Upvotes: 0

thisisashwani
thisisashwani

Reputation: 1844

[Works in 2021 for Chrome(v88, 89, 90), Firefox, Brave, Safari]

The old answers already written here will work with trial and error, but most of them don't link to any official doc or what Chrome has to say on this matter.

The issue mentioned in the question is because of Chrome's autofill feature, and here is Chrome's stance on it in this bug link - https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164

To put it simply, there are two cases -

  • [CASE 1]: Your input type is something other than password. In this case, the solution is simple, and has three steps.

    • Add name attribute to input
    • name should not start with a value like email or username, otherwise Chrome still ends up showing the dropdown. For example, name="emailToDelete" shows the dropdown, but name="to-delete-email" doesn't. Same applies for autocomplete attribute.
    • Add autocomplete attribute, and add a value which is meaningful for you, like new-field-name

    It will look like this, and you won't see the autofill for this input again for the rest of your life -

    <input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />

  • [CASE 2]: input type is password

    • Well, in this case, irrespective of your trials, Chrome will show you the dropdown to manage passwords / use an already existing password. Firefox will also do something similar, and same will be the case with all other major browsers. [1]
    • In this case, if you really want to stop the user from seeing the dropdown to manage passwords / see a securely generated password, you will have to play around with JS to switch input type, as mentioned in the other answers of this question.

[1] A detailed MDN doc on turning off autocompletion - https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Upvotes: 17

Touqeer
Touqeer

Reputation: 658

MAR 2020

I'm facing this issue and unfortunately non of the solutions worked for me. So I applied the little hack which is working fine.

<input autocomplete="off" type="password" name="password" id="password" readonly="readonly">

$('#password').on('click', function (event) {
  $('#password').removeAttr('readonly');
  $('#password').focus();
});

$('#password').on('blur', function (event) {
  $('#password').attr('readonly', 'readonly');
});

when you click on password input field it start to show suggestion but when trigger focus on input field than it does not show suggestions so that's how I solved my issue.

I hope it will help someone.

Upvotes: 1

SantoshK
SantoshK

Reputation: 1877

You can use the below concept to implement AutoComplete='false' for chrome as well as other browsers. Take a dummy input type which will be hidden with opacity 0. by default chrome browser have triggered the first one which already hidden.

<input style="opacity: 0; position: absolute; z-index: -1;" name="email">
<input type="search" name="email" class="form-control" autocomplete="new-email" id="email">

Upvotes: 1

J.T. Taylor
J.T. Taylor

Reputation: 4277

2021 UPDATE:
Change <input type="text"> to <input type="search" autocomplete="off" >

That is all. Keeping the below answer around for nostalgia.

For a reliable workaround, you can add this code to your layout page:

<div style="display: none;">
 <input type="text" id="PreventChromeAutocomplete" 
  name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Chrome respects autocomplete=off only when there is at least one other input element in the form with any other autocomplete value.

This will not work with password fields--those are handled very differently in Chrome. See https://code.google.com/p/chromium/issues/detail?id=468153 for more details.

UPDATE: Bug closed as "Won't Fix" by Chromium Team March 11, 2016. See last comment in my originally filed bug report, for full explanation. TL;DR: use semantic autocomplete attributes such as autocomplete="new-street-address" to avoid Chrome performing autofill.

Upvotes: 160

Rusty
Rusty

Reputation: 671

2021 answer: Sadly, the only things that work are disgustingly hacky. My solution is to add a dynamically generated random number to the end of the name attribute (E.g. <input name="postcode-22643"...) when generating your front-end markup. This tricks the browser suitably for now.

You'll then need to add something server-side to cleanse the incoming post request. For example, within NodeJS / Express, I've put a middleware in, with a bit of regex to remove the number segment from the received post request. Mine looks like this, but I imagine something pretty similar would be available in other languages:

const cleanseAutosuggest = function (req, res, next) {
   for (const key in req.body) {
      if (key.match(/-\d+/)) {
         req.body[key.replace(/-\d+/, "")] = req.body[key];
         delete req.body[key];
      }
   }
   next();
};

app.post("/submit", cleanseAutosuggest, function (req, res, next) {
...
})

Upvotes: 3

alex025
alex025

Reputation: 173

I've found another solution - just mask the characters in your autocomplete="off" inputs with style="-webkit-text-security: disc;". You can also add it to your CSS rules in something like following way:

[autocomplete="off"] {
  -webkit-text-security: disc;
}

The main goal is to elminate the type="password" or other simillar type attribute from the element.

At least, for the moment of 2021-01-24 this solution works...

Upvotes: 0

BenHero
BenHero

Reputation: 333

Some end 2020 Update. I tried all the old solutions from different sites. None of them worked! :-(
Then I found this:
Use

<input type="search"/>

and the autocomplete is gone!

Success with Chrome 86, FireFox, Edge 87.

Upvotes: 10

Swapnil Navalakha
Swapnil Navalakha

Reputation: 319

After lot of digging I found that autocomplete dropdown on Chrome(Version 83.0.4103.116) doesn't shows up when we remove name and id attribute on input tag eg. code as below 

<div>
<span>
  Auto complete off works if name and id attribute is not set on input tag 
  <input type="text"/>
</span>
<span>
  Auto complete will work here since id attribute is set
  <input id="name" type="text"/>
</span>
</div>

Upvotes: 2

Faruk Feres
Faruk Feres

Reputation: 56

For me setting autocomplete="off" in form and inputs worked. But can be flake. Some times it will suggest password or some saved login+password option. But don't come pre-filled.

Chrome Version: 81.0.4044.138

CodePen

<form role="form" method="post" action="#" autocomplete="off">
  <label for="login">Login</label><br/>
  <input type="text" name="login" id="login" autocomplete="off" />
  <br/><br/>
  <label for="password">Password</label><br/>
  <input type="password" name="password" autocomplete="off" />
  <br/><br/>
  <input type="submit" name="submit" value="Submit" />
</form>

Others Options:

  1. Remove 'form' tag... or changing it from 'div' to 'form' before submitting.
  2. With javascript and some contentEditable="true" fields could make your way...

Usually I have to find another work around every few months...

Upvotes: 2

Madi s
Madi s

Reputation: 91

Chrome keeps changing the way it handles autocomplete on each version, the way I came up was, to make the fields readonly and onclick/focus make it Not readonly. try this jQuery snippet.

jQuery(document).ready(function($){
//======fix for autocomplete
$('input, :input').attr('readonly',true);//readonly all inputs on page load, prevent autofilling on pageload

 $('input, :input').on( 'click focus', function(){ //on input click
 $('input, :input').attr('readonly',true);//make other fields readonly
 $( this ).attr('readonly',false);//but make this field Not readonly
 });
//======./fix for autocomplete
});

Upvotes: 3

Drzewiecki
Drzewiecki

Reputation: 74

I managed to disable autocomple exploiting this rule:

Fields that are not passwords, but should be obscured, such as credit card numbers, may also have a type="password" attribute, but should contain the relevant autocomplete attribute, such as "cc-number" or "cc-csc". https://www.chromium.org/developers/design-documents/create-amazing-password-forms

<input id="haxed" type="password" autocomplete="cc-number">

However it comes with the great responsibility :)

Don’t try to fool the browser Password managers (either built into the browser, or external) are designed to ease the user experience. Inserting fake fields, using incorrect autocomplete attributes or taking advantage of the weaknesses of the existing password managers simply leads to frustrated users.

Upvotes: 5

Fei Sun
Fei Sun

Reputation: 518

I have a nearly perfect solution for this issue: Remove "type=password" from all password input elements,after all of them were loaded into DOM,give a timeout to set the "type=password" back.Chrome will ignore the changed type for auto filling.Example:

setTimeout(()=>{ele.type="password"},3000)

Or change the type by event:

ele.oninput=function(){ele.type="password"}

Upvotes: 0

Related Questions