Chrome Ignores Autocomplete="Off"

Outsmarting Chrome's stubborn autofill

With often overzealous attempts to assist users, browser autofill may ignore autocomplete="off". This section delves deeper into methods that have proven effective against this stubborn mechanism.

Dynamic control using JavaScript

By altering the autocomplete attribute dynamically, JavaScript offers control over input fields:

// Sorry, autocomplete. It's not you, it's me.
document.getElementById("myInput").autocomplete = "off";


Decoy form fields to the rescue

Insert invisible, non-functional form fields to throw off the autofill mechanism:

<!-- Chrome, meet your nonfunctional, invisible friends -->
<input type="text" style="display:none">
<input type="password" style="display:none">
<!-- Your real form fields come here -->


Obfuscation never looked so good

Creativity meets function with offbeat attribute values like "no-fill-today-thanks" or "new-password" taking Chrome's autofill for a ride.

Readonly until given focus

Implement fields as readonly, making them editable when users click on it:

<!-- "You shall not pass!...until you click on me" -->
<input type="text" readonly onfocus="this.removeAttribute('readonly');">


Search input to the rescue

Swapping out your standard <input type="text"> for <input type="search"> combined with autocomplete="off" may yield better success:

<!-- Search input wearing an autocomplete-off costume -->
<input type="search" autocomplete="off">


Staying in the know

Browser behaviors aren't set in stone; keep an eye on the latest updates from browser developers to stay ahead of the game.

Mastering the art of control: Techniques for smarter forms

Silencing Chrome's autofill feature calls for a concoction of cunning and UX understanding. Here are some advanced tactics that can help you fine-tune your approach:

Translucent decoys

Browsers don't fill fields they can't see. Set opacity to 0 and position the field absolutely to keep it hidden:

<!-- The Invisible Man's pick for a form field -->
<input type="text" style="opacity:0; position: absolute;">


jQuery firepower

Employ jQuery to dynamically append fields with custom autocomplete attributes:

// jQuery crafting a custom input field under Chrome's nose
$('<input>').attr({
    type: 'text',
    name: 'hidden',
    autocomplete: 'off'
}).appendTo('form');


Make attribute values unique

Customize the attribute values for a shot at by-passing Chrome's logic:

<!-- Let's face it, no Autofill can resist an address-level4 -->
<input type="text" autocomplete="address-level4">


Testing across the board

Ensuring a consistent user experience across all browsers is paramount – always validate your solutions on diverse browsers.