Bypassing Chrome’s AutoFill

Google Chrome’s AutoFill feature is a user-controlled setting that web developers have very limited control over. This presents a problem for us with the AddressFinder Widget, since the AutoFill control will cover the suggestions provided by AddressFinder.

Since Chrome 41, autocomplete="off|false" no longer disables AutoFill, but there are a few other techniques we can use:

1. Change the input’s type attribute to search, or
2. Use JavaScript to toggle the form field’s readonly state when focused

1. Start using type="search"

Modify the AddressFinder-enabled field in the HTML, by changing the input type attribute to search, e.g.:

<input type="search" name="address" id="address_field">

This has some side-effects though:

• Certain browsers will style Search inputs differently compared to other text-based inputs
• Some browsers add extra controls to the search input, such as a clear button

To counter these side-effects, add the following properties to your AddressFinder-enabled search fields:

#address_field {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
#address_field::-ms-clear {
  display: none;
}
#address_field::-webkit-search-cancel-button {
  display: none;
}
#address_field::-webkit-search-decoration {
  -webkit-appearance: none;
          appearance: none;
}

For more details on styling search inputs, see: CSS Tricks: Styling search inputs

Or, 2. Toggle the field’s readonly state

Start by setting the following attributes on your address fields:

<input
  type="text"
  id="address_field"
  readonly
  onfocus="this.removeAttribute('readonly')"
>

This technique sets the field to be readonly initially. When the user focuses on the field, the onfocus handler removes the field’s readonly attribute.

IE 7/8 compatibility

The code below is extracted from the widget generator:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<script>
  function downloadAF(f){
    var script = document.createElement('script');
    script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
    script.async = true;
    script.onload = f;
    script.onreadystatechange = function() {
      if (script.readyState === 'complete' || script.readyState === 'loaded'){
        f();
      }
    }
    document.body.appendChild(script);
  };

  if (document.addEventListener){
    document.addEventListener('DOMContentLoaded', function(){
      downloadAF(initAF);
    });
  } else {
    document.onreadystatechange = function() {
      if (document.readyState === 'complete' || document.readyState === 'loaded'){
        downloadAF(initAF);
      }
    }
  }

</script>

The block of code included across lines 7 to 11 and lines 20 to 24 are necessary as versions 7 & 8 of Internet Explorer do not support line 6 and lines 16 to 18.

This full code snippet is required to be included if IE 7/8 support is required. If you are not supporting versions of IE < 9 then the simplified version of this code can be used from the widget generator.