How do you disable browser autocomplete on web form field / input tags?

In-depth understanding

Autocomplete behavior unpacked

As a response to security concerns, browers may continue to support auto-filling data despite having autocomplete="off", this is mostly due to the password manager's persistence. They claim usability advantages and protection against phishing attacks.

The following methods can offer better control over autofill:

• UUIDs for field names: UUIDs can be used to randomize input names, discouraging browsers to autofill fields.

• Password field isolation: Creating a separate form for password inputs or placing two password fields can trick browsers, especially Safari, to bypass autofill.

• Use hidden inputs: Fool the browser by placing hidden text and password input fields before the real fields.

• Apply readonly dynamically: Make input fields readonly and remove it with JavaScript when the field gets focused, preventing most browser autofills:

<input type="text" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly', true);">


Tips for advanced form handling

Beyond simple autocomplete settings:

• Trigger focus post blur: A mobile-friendly technique to manage the keyboard trigger, especially in mobile Safari.

• Cross-browser compatibility: Always validate your solution across different browsers. Investigate form behavior via Developer Tools.

• Clear browser cache: Ensure consistency by regularly clearing your browser's cache. Form data may not disappear with your settings due to cache persistence.

The security paradox

Implementing autocomplete=off may paradoxically reduce security, as users may resort to less secure passwords if they have to remember multiple ones. Always consider this paradox when deciding to disable autocomplete.

Common scenarios and fixes

Possible situations where autofill is stubborn:

• Adjacent text fields: Browsers may autofill adjacent text fields before a password field. Consider reordering or isolating these fields.

• Multiple password fields: In forms with multiple password inputs, browsers may insist on autofilling all fields, especially in sign-up pages.

• Validation errors: Incorrect autofill data could lead to validation failures. Plan your code's response to these instances.

Enhanced security measures

Incorporating randomized field names or additional hidden fields not only discourages autofill but also strengthens defenses against XSRF threats. A multi-layered approach ensures functionality doesn't compromise security.