AutoComplete event handling

  • Article

Starting with Internet Explorer 11, AutoComplete provides improves behavior with touch-based input devices. When multiple values have been saved for an item on a form, you can now select the value you want with a single tap. In addition, IE11 automatically fills in saved login credentials. Additional changes improve security and consistency when compared to the behavior of other popular browsers. As a result, sites designed for earlier versions of Internet Explorer might need to be updated. To help you create effective cross-browser solutions involving autocomplete, this topic describes AutoComplete event behavior for recent versions of IE.

AutoComplete event support and firing order

IE11 updated two AutoComplete experiences:

  • The user experience associated with touch input and input boxes with multiple saved values (also called "tap and select").

    In this experience, these events are fired.

    Event support by version IE11 Internet Explorer 10 and earlier
    focus event Yes Yes
    change event Yes (IE9 mode and later) No
    blur event Yes Yes
    input event Yes (IE9 mode and later) Yes (IE10 mode only)
    propertychange event Yes (IE10 mode and earlier) Yes (all document modes)

     

    Here's the order of these events for recent versions of IE.

    Event firing order by version IE11 Internet Explorer 10 Internet Explorer 9 Internet Explorer 8 and earlier
    change event 2 3 3
    input event 1 2 2
    propertychange event 1 1 1

     

  • The handling of credentials associated with login forms (also called "credential autofill").

    In this experience, these events are fired.

    Event support by version IE11 Internet Explorer 10 and earlier
    focus event No No
    change event Yes (ie9 mode and later) No
    blur event No No
    input event Yes (IE9 mode and later) No
    propertychange event Yes (IE10 mode and earlier) Yes (all supported document modes)

     

    Here's the order of these events for recent versions of IE.

    Event firing order by version IE11 Internet Explorer 10 Internet Explorer 9 Internet Explorer 8 and earlier
    change event 2 3 3
    input event 1 2 2
    propertychange event 1 1 1

     

    For security reasons, credential autofill is supported only when all of the following conditions are true:

    • The site hosting the login form is secure; that is, it is served using the HTTPS protocol.

    • The login form is not hosted in a frame that is different from the parent domain.

    • The user has not enabled the display of mixed content.

    These restrictions help reduce the opportunity for cross-site scripting (XSS) attacks and other malicious behavior.

    Note  The credential autofill process occurs only once during a page's lifetime. You cannot trigger a second evaluation by using script to inject a new input element or to remove an element from the form.

     

Impact and recommendations

The impact of these changes on existing websites varies with the design of each site. Simple sites, such as those that do not modify their appearance in response to user input, see the least impact. More ambitious designs may enable Log in buttons only after the user enters credentials. These sites are the most likely to be impacted by these changes.

The scope of impact depends entirely on the implementation of the site. Sites that follow best practices (such as feature detection) rely on standards-based events, as shown here.

<!DOCTYPE html>
<head><script>
    function enableButton() {
       document.getElementById('login').disabled = false;
    }
</script></head>

<body><form>
<input id="username" name="username" type="text" onchange="enableButton()" />
<input id="password" name="password" type="password" onchange="enableButton()" />
<input id="login" name="login" type="submit" value="Submit" disabled/>
</form></body></html>

Sites that follow different practices may encounter difficulties. For example:

  • Sites that rely on the proprietary propertychange event may not function as expected when viewed with IE11.
  • Sites that rely on keyboard navigation events will also fail when viewed with IE11.
  • Sites that perform browser sniffing may not function as expected when viewed with IE11.

In each of these cases, we recommend updating the site to reflect best practices and standards-based techniques.