Reputation: 378
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:
autocomplete="chrome-off"
autocomplete="false"
autocomplete="disabled"
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
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
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
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
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
Reputation: 320
autocomplete="off"
doesn't work anymore. The only thing which works from 2019 is
autocomplete="new-password"
Upvotes: 3
Reputation: 412
autocomplete="off"
to autocomplete="random-value"
. This is the temporary fix for now.
Upvotes: 0