Nick Arnie
Nick Arnie

Reputation: 378

How to disable autocomplete and autofill for chrome / jquery

I want to disable both Chrome autocomplete AND Chrome autofill.

I'm using JQuery UI to autocomplete an input field. My jquery-ui autocomplete works fine, however chrome browser displays it's own autofill on top of mine making it difficult for users to select the correct dropdown item.

I'm using autocomplete="off" which seems to disable autocomplete for chrome but shows autofill options.

I've tried the following:

Those attribute values ( or any invalid attribute values ) seem to be disabling the *autofill but do enable autocomplete.

Important: I cannot use random name attributes since I am performing ajax requests for my own jquery-ui autocomplete

Upvotes: 3

Views: 9841

Answers (7)

Pandi_Snkl
Pandi_Snkl

Reputation: 494

Chrome automatically find the input fields and override the autocomplete behavior's. So we need to put random string to all input field when focus.

First set autocomplete="off" to all input fields and remove autofocus of any input field (if any).

Then put below scripts section on your html page or layout.

<script type="text/javascript">

            $(document).ready(function () {

                function generateRandomString() {
                    var alphabet = 'abcdefghijklmnopqrstuvwxyz';
                    var randomString = '';

                    for (var i = 0; i < 5; i++) {
                        var randomIndex = Math.floor(Math.random() * alphabet.length);
                        randomString += alphabet.charAt(randomIndex);
                    }

                    return randomString;
                }


           
//this focus event listener randomly change the autocomplete of focused input 
                $('input').focus(function (e) {
                    $(this).attr('autocomplete', generateRandomString())                
                });


            });

</script>

gist link: https://gist.github.com/Alagappapandian/f4f9f374e8cc2767bb754e73d4854443

Upvotes: 0

Mahesh Prajapati
Mahesh Prajapati

Reputation: 672

Try autocomplete="off" in your input field and also use JavaScript to set the attribute dynamically. Chrome sometimes respects the dynamic change over static HTML.

<input type="text" id="yourInput" autocomplete="off">
<script>
  document.getElementById('yourInput').autocomplete = 'chrome-off';
</script>

Upvotes: 0

Ryan
Ryan

Reputation: 491

As of early 2022 this seems to work:

autocapitalize="off" autocomplete="off" autocorrect="off" autofocus="" role="combobox" spellcheck="false"

It is the technique used on the google home page search box.

Upvotes: 1

Nick Arnie
Nick Arnie

Reputation: 378

I finally found a solution by combining a few different answers.

STEP 1

In order to fix the autocomplete issue, you can add a dummy invisible input field as mentioned here. So your html should look something like this:

<input id="dummy_location" type="search" name="dummy_location" style='display: none;'>
<input id="location" type="search" name="location">

This will cause chrome autofill pop-up

STEP 2

To disable the autofill pop-up, we need to add an invalid value for the autocomplete attribute like this.

$("#fromcity_ac").attr({
     autocomplete: "chrome-off",
});

YOU CAN STOP HERE.

Chrome will work fine, however, autocomplete issue will pop up on other browsers such as firefox. To fix this you can edit step 2 by checking what browser is being used and setting an appropriate value for the autocomplete attribute.

var isChromium = window.chrome;
var winNav = window.navigator;
var vendorName = winNav.vendor;
var isOpera = typeof window.opr !== "undefined";
var isIEedge = winNav.userAgent.indexOf("Edge") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");

// Autocomplete default value
var autocomplete = "chrome-off";
if (isIOSChrome) {
  // is Google Chrome on IOS
} else if (
  isChromium !== null &&
  typeof isChromium !== "undefined" &&
  vendorName === "Google Inc." &&
  isOpera === false &&
  isIEedge === false
) {
  // Is google chrome
} else {
  // Is firefox
  autocomplete = "off";
}

Upvotes: 1

Ejilarasan J
Ejilarasan J

Reputation: 320

autocomplete="off"

doesn't work anymore. The only thing which works from 2019 is

autocomplete="new-password"

Upvotes: 3

Ahmed Sunny
Ahmed Sunny

Reputation: 2243

try this , this works for chrome

autocomplete="chrome-off"

Upvotes: 0

stillKonfuzed
stillKonfuzed

Reputation: 412

autocomplete="off" to autocomplete="random-value". This is the temporary fix for now.

Upvotes: 0

Related Questions