Detecting Browser Autofill

Question

How do you tell if a browser has auto filled a text-box? Especially with username & password boxes that autofill around page load.

My first question is when does

Answer 1

The problem is autofill is handled differently by different browsers. Some dispatch the change event, some don't. So it is almost impossible to hook onto an event which is triggered when browser autocompletes an input field.

• Change event trigger for different browsers:

  • For username/password fields:

    1. Firefox 4, IE 7, and IE 8 don't dispatch the change event.
    2. Safari 5 and Chrome 9 do dispatch the change event.

  • For other form fields:

    1. IE 7 and IE 8 don't dispatch the change event.
    2. Firefox 4 does dispatch the change change event when users select a value from a list of suggestions and tab out of the field.
    3. Chrome 9 does not dispatch the change event.
    4. Safari 5 does dispatch the change event.

You best options are to either disable autocomplete for a form using autocomplete="off" in your form or poll at regular interval to see if its filled.

For your question on whether it is filled on or before document.ready again it varies from browser to browser and even version to version. For username/password fields only when you select a username password field is filled. So altogether you would have a very messy code if you try to attach to any event.

You can have a good read on this HERE