Disabling Chrome Autofill

Applying autocomplete attribute

The autocomplete attribute can be a powerful tool when used judiciously, it can enhance user experience, yet thwart unwarranted autofill suggestions.

OTP fields and autofill

Autofill for One-Time-Password fields can be avoided with:

<input type="text" autocomplete="one-time-code">


Workaround for address fields

Disable the autofill feature for address fields with this clever trick:

<input type="text" autocomplete="new-user-street-address"> <!-- No, not the Hogwarts address! -->


Pioneering with non-standard and generic inputs

Venturing into unexplored territories with autocomplete values or using generic IDs can yield unexpected results:

<input type="text" id="field1" autocomplete="do-not-autofill"> <!-- "Do not" is not a suggestion! -->


Outsmarting autofill and staying vigilant

Chrome's autofill is like that clingy friend who never gets the hint. To keep it at bay, you gotta stay on your toes.

Hidden fake inputs and invisible fields

Incorporate hidden fake inputs or off-screen fields:

<input type="text" style="position:absolute; top:-500px"> <!-- Where's Waldo? -->


Readonly until user interaction

Set fields to readonly and enable them when the user interacts:

document.getElementById('myInput').addEventListener('focus', (event) => {
  event.target.readOnly = false; // Breaking the 'read' chains on focus.. freedom!
});


User's in command

Remember to let users know how to manage incorrect autofill data in Chrome's settings. Purchasing the ship doesn't make one the captain, does it?

Stay dynamic

If everything fails, let JavaScript take the wheel and outsmart autofill:

setTimeout(function() {
  document.getElementById('dynamicField').style.display = 'block'; // Now you see me!
}, 1000);
