How to disable HTML Input Autocomplete

disable-form-auto-complete.md

Definitive guide → 6 ways to solve

I would very much like there to be a WEB standard for this, but unfortunately there is not!

I studied this for several days and gathered a lot of information and I will share it with you.

Before developing or using an internet hack you need to know that there are 2 types of Autocomplete. There is the autocomplete of the page and the autocomplete of the browser.

This is the global browser autocomplete. It appears whenever you define autocomplete="off" or when you define no autocomplete but define type="email" for example. The global autocomplete suggests emails you've used on other sites. The global autocomplete has a manage button at the bottom and can be disabled in the browser config.

The page's autocomplete is this. It appears when you define a specific autocomplete, for example autocomplete="customer-name". This autocomplete never appears right away, it starts to appear when you start filling out the same form many times. For example, you have a screen where you register your customers, after the fourth or fifth registered customer Chrome will start giving suggestions with the names of the customers already registered. The page autocomplete does not have a manage button at the bottom, unlike the global autocomplete.

There are several Hacks to work around this problem. You must choose the one that best fits your project. Below is a brief list of the Hacks that can be used and that work:

• Add the readonly property to the input and remove the property when the input is clicked or when it receives focus so that the user can type (not tested by me). Example:

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

 

• Set the input type to search type="search" and turn autocomplete off autocomplete="off" (not tested by me). Example:

<input type="search" autocomplete="off"> 

 

• Place a div around the input and before the input place an input with display: none and tabindex"-1" (not tested by me). Example:

<div>
    <input class="hidden" tabindex="-1" aria-hidden="true">
    
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="off">
</div>

 

• Some people also reported that if you put a field exactly the same on top, however with a different id and display none will also work (not tested by me). Example:

<input type="email" id="fake-mail" name="email" class="hidden"> 
<input type="email" id="real-email" name="email">

 

• Define a random name and an autocomplete for the input every time the page is reloaded. In this case you would always use the ID attribute to work (this was the solution that I implemented in my project). It worked perfectly for me. Example:

<input id="email" name="af2Km9q" autocomplete="x7pv66b">

 

• Some people reported that put some non-printable characters on label and input placeholder also works. According to some reports Briggers take into account input ID, Name, Label and Placeholder, and placing some magical characters do not print in random places of Placeholder and Label, we cheat the browser (not tested by me). Example:

<label for="email">Your&#8204; Ema&#8204;il</label> 
<input type="email" id="email" name="email" placeholder="Type&#8204; yo&#8204;ur ema&#8204;il">

 

• A workaround that also works is to use a <div> tag with the contenteditable="true" property instead of using the <input> tag. The contenteditable="true" property allows users to edit the content of the element, in which case they will edit the content of the div which is our fake input. This solution is adopted by several giant companies in the market, such as Facebook and Microsfot for example. Example:

<div contenteditable="true"></div>

 
Some other considerations:

• Adding the autocomplete="off" property to the form tag can help.
• Adding a random QueryParam with a random value in the URL can help in some situations (reports from users, not tested). Example: httpls://mysite.com/page.html?param=random_value_552xads
• Does adding password type inputs and email type inputs in some specific places on the page seem to work? Does creating a fake form also help? (reports from users, not tested)
• Adding the autocorrect="off" and spellcheck="false" property can help you avoid some annoying tooltips on Safari and MacOS.  
   
  References and topics I used to study and to understand how the autocomplete worked, what were the most used hacks and how it all works:
• https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
• https://stackoverflow.com/questions/10938891/disable-form-autofill-in-chrome-without-disabling-autocomplete
• https://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tags
• https://gist.github.com/niksumeiko/360164708c3b326bd1c8
• https://gist.github.com/runspired/b9fdf1fa74fc9fb4554418dea35718fe
• https://pt.stackoverflow.com/questions/61510/como-remover-auto-complete-de-input-do-google-chrome  
   
  There are many ways to solve this problem. You should find the one that best fits your project. Be sure to test your solution well as autocomplete sometimes only starts to appear after a while.

Hack #1 worked for me

<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

I also added some styles to make it look like it's not a readonly form

<style>
	input:read-only {
		border: 1;
		box-shadow: none !important;
		background-color: white !important;
	}
</style>