Detecting Browser Autofill: A Detailed Guide

Autofill is a convenient feature that browsers offer to swiftly fill out form fields with pre-saved information. While this can streamline user experience, it poses a challenge for developers who seek to track or disable autofill in specific scenarios.

When Does Autofill Happen?

The timing of autofill varies based on the browser and input field type.

• For username/password fields:

  • Firefox 4, IE 7, and IE 8: Doesn't trigger change events on autofill.
  • Safari 5 and Chrome 9: Triggers change events.

• For other form fields:

  • IE 7 and IE 8: Doesn't trigger change events.
  • Firefox 4: Triggers change events when users select from a suggestion list and tab out.
  • Chrome 9: Doesn't trigger change events.
  • Safari 5: Triggers change events.

How to Detect Autofill

Detecting autofill is not straightforward due to browser inconsistencies. Here are a few options:

• Disable Autofill: Disable autofill for specific fields using "autocomplete='off'" in HTML.
• Periodically Check Field Value: Regularly check the value of the input field to determine if it has been autofilled.

• Trigger Event Listener: Some browsers trigger events on autofill:

  • Chrome: Use the "input" event (e.g., ).
  • Firefox: Use the "change" event for some form fields.

Browser-Specific Considerations:

• Firefox:

  • Autofill triggers a change event for some fields.
  • Performance Monitor addon can be used to measure autofill performance.

• Chrome:

  • Triggers an "input" event on autofill.
  • Doesn't support CSS's "autocomplete" property.

• Safari:

  • Triggers change events for some fields.
  • Supports the "autocomplete" property.

Additional Resources:

• [W3C Autofill Capability Guide](https://www.w3.org/TR/html-dev/forms.html#autofill)
• [Detecting Autofill in Browsers](https://blog.bitdefender.com/web-client/detecting-autofill-in-browsers/)