Bypassing Autofill

Google Chrome and Safari's autofill features are user-controlled settings 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.

1. Disable on Chrome

To disable the autofill on Chrome you just need to change the autocomplete property to a non standard value such as “disable-autocomplete”

    <input
      type="text"
      name="property"
      autocomplete="disable-autocomplete"
    >

NB: The previous solution of setting autocomplete=“off” no longer works.

2. Disable on Safari

The Safari autofill checks the input label, placeholder, field name and id to determine if the field should be auto-filled. If any of these values contain the word ‘address’ the autofill will be enabled. To disable this on Safari we must remove references to the word ‘address’ in all of these values. Substituting another word for ‘address’, such as ‘property’ will work well. If you must use the word 'Address' in your label or as a placeholder value, you can add extra but non-visible characters into the the word. For example:

Add‌ress

The extra characters can’t be seen by the user, but including them tricks the browser into thinking there are no address fields.

    <label for="property">Add&zwnj;ress</label>
    <input type="search" name="property" id="property_field" placeholder="Enter your add&zwnj;ress">

IE 7/8 compatibility

The code block below is constructed from a combination of Widget Code Generator code and supplementary code required for IE 7 & 8.

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>

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.