Chrome ignores autocomplete="off"

<>

This question already has an answer here:

Answers


The hidden input element trick still appears to work (Chrome 43) to prevent autofill, but one thing to keep in mind is that Chrome will attempt to autofill based on the placeholder tag. You need to match the hidden input element's placeholder to that of the input you're trying to disable.

In my case, I had a field with a placeholder text of 'City or Zip' which I was using with Google Place Autocomplete. It appeared that it was attempting to autofill as if it were part of an address form. The trick didn't work until I put the same placeholder on the hidden element as on the real input:

<input style="display:none;" type="text" placeholder="City or Zip" />
<input autocomplete="off" type="text" placeholder="City or Zip" />

Looks like this is fixed! See https://codereview.chromium.org/1473733008


When using a widget like jQuery UI's Autocomplete make sure to check that it is not adding/changing to autocomplete attribute to off. I found this to be true when using it and will break any work you may have done to override any browser field caching. Make certain that you have a unique name attribute and force a unique autocomplete attribute after the widget initializes. See below for some hints on how that might work for your situation.

<?php $autocomplete = 'off_'.time(); ?>
<script>
   $('#email').autocomplete({
      create: function( event, ui ) {
         $(this).attr('autocomplete','<? echo $autocomplete; ?>');
      },
      source: function (request, response) { //your code here },
      focus: function( event, ui ) { //your code here },
      select: function( event, ui ) { //your code here },
   });
</script>
<input type="email" id="email" name="email_<? echo $autocomplete; ?>" autocomplete="<? echo $autocomplete; ?>" />

No clue why this worked in my case, but on chrome I used autocomplete="none" and Chrome stopped suggesting addresses for my text field.


To prevent autocomplete, just set an empty space as the input value:

<input type="text" name="name" value="  ">

Here is what worked for me on Chrome Version 51.0.2704.106.<input id="user_name" type="text" name="user_name" autocomplete="off" required /> and in combination with <input id="user_password" type="password" name="user_password" autocomplete="new-password" required />. My problem was that after implementing new-password it would still show a drop-down of usernames on the user_name field.


Need to use AutoComplete='false' which will work on chrome browser also Used code

<ng-form autocomplete="false"> 
.....
</ng-form>

I've just tried the following, and it appears to do the trick on Chrome 53 - it also disables the "Use password for:" drop down when entering the password field.

Simply set your password input type to text, and then add the onfocus handler (inline or via jQuery/vanilla JS) to set the type to password:

onfocus="this.setAttribute('type','password')"

Or even better:

onfocus="if(this.getAttribute('type')==='text') this.setAttribute('type','password')"

Add this right after form tag:

<form>
<div class="div-form">
<input type="text">
<input type="password" >
</div>

Add this to your css file:

.div-form{
opacity: 0;
}

I'am using Chrome - Version 64.0.3282.140 (Official Build) (64-bit) and used following code along with form name and it works for me.

<form name="formNameHere">....</form>
<script type="text/javascript">
    setTimeout(function(){
        document.formNameHere.reset();
    },500);
</script>

None of the solutions worked except for giving it a fake field to autocomplete. I made a React component to address this issue.

import React from 'react'

// Google Chrome stubbornly refuses to respect the autocomplete="off" HTML attribute so
// we have to give it a "fake" field for it to autocomplete that never gets "used".

const DontBeEvil = () => (
  <div style={{ display: 'none' }}>
    <input type="text" name="username" />
    <input type="password" name="password" />
  </div>
)

export default DontBeEvil

I call this the sledgehammer approach, but it seems to work for me where all other approaches I tried have failed:

<input autocomplete="off" data-autocomplete-ninja="true" name="fa" id="fa" />

Note: the input name and id attributes should not contain anything that would give the browser a hint as to what the data is, or this solution will not work. For instance, I'm using "fa" instead of "FullAddress".

And the following script on page load (this script uses JQuery):

$("[data-autocomplete-ninja]").each(function () {
    $(this).focus(function () {
        $(this).data("ninja-name", $(this).attr("name")).attr("name", "");
    }).blur(function () {
        $(this).attr("name", $(this).data("ninja-name"));
    });
});

The above solution should prevent the browser from autofilling data gathered from other forms, or from previous submits on the same form.

Basically, I'm removing the name attribute while the input is in focus. As long as you're not doing anything requiring the name attribute while the element is in focus, such as using selectors by element name, this solution should be innocuous.


For this problem I have used this css solution. It is working for me.

input{
  text-security:disc !important;
  -webkit-text-security:disc !important;
  -moz-text-security:disc !important;
}

autocomplete="off" works now, so you can just do the following:

<input id="firstName2" name="firstName2" autocomplete="off">

Tested in the current Chrome 70 as well as in all versions starting from Chrome 62.

Demo.

UPDATE: Since people tend to downvote this (see, for instance, a comment from @AntonKuznetsov down below) before reading the demonstration in the JSFiddle or actually looking into the JSFiddle's HTML, I have to express it clearly:

  • the top input has the auto complete working
  • the bottom input has the auto complete disabled by adding autocomplete="off"

I've came up with the following solution that queries all fields with the attribute autocomple="off" then set it's value to a single space then set a timer for around 200ms and set the value back to an empty string.

Example:

// hack to prevent auto fill on chrome
var noFill = document.querySelectorAll("input[autocomplete=off]");

noFill.forEach(function(el) {
    el.setAttribute("value", " ");
    setTimeout(function() {
        el.setAttribute("value", "");
    }, 200);
});

I choose 200ms for the timer because after some experimentation 200ms seems to be the amount of time it takes on my computer for chrome to give up on trying to autocomplete the fields. I'm welcome to hear what other times seem to work better for other people.


Need Your Help

Get visitor's Optimizely A/B test and variation

javascript api optimizely

When I run an experiment on my website, I want to be able to find out which test and variation the current visitor sees. I can't find how to do this from the Optimizely Javascript API.

Return pre-UPDATE Column Values Using SQL Only - PostgreSQL Version

sql postgresql sql-update subquery

I have a related question, but this is another part of MY puzzle.