Search code examples
htmlmacosautocompletesafari

How to disable autocomplete in address fields for Safari?


I have a form where I've implemented an autosuggest dropdown (via jQueryUI) so that a user can search for a contact in our app and have their information auto-filled. I want autocomplete to be disabled on the form, but Safari (on macOS) is ignoring autocomplete="off". I have specified autocomplete to be off on the input fields, as well as in the <form> tag. This form is for a physical mailing address for a friend, and Safari is showing matching contacts from Contacts.app... but it is overlaying a dropdown on top of my autosuggest dropdown. How do I force Safari to stop showing this dropdown?

enter image description here

<form accept-charset="UTF-8" action="/listings/sailing/create_customized_card" autocomplete="off" class="new_greeting_card" id="new_greeting_card" method="post">
...
  <li>
    <input autocomplete="off" autocorrect="off" class="validate required" id="to_name" name="delivery[to_name]" placeholder="First &amp; last name" size="30" type="text" />
  </li>
  <li>
    <input autocomplete="off" autocorrect="off" class="validate required" id="to_address_street_1" name="to_address[street_1]" placeholder="Street 1" size="30" type="text" />
  </li>
  <li>
    <input autocomplete="off" autocorrect="off" id="to_address_street_2" name="to_address[street_2]" size="30" type="text" />
  </li>
  <li>
    <input autocomplete="off" class="validate required city" id="to_address_city" name="to_address[city]" placeholder="City" size="30" type="text" />
    <select class="validate required state" id="to_address_state" name="to_address[state]">
    <option value="AK">AK</option>
    ...
    </select>
    <input autocomplete="off" class="validate required zip" id="to_address_zip_code" name="to_address[zip_code]" pattern="(\d{5}([\-]\d{4})?)" placeholder="Zip" size="30" type="text" />
  </li>
...
</form>

FYI - I know that most browsers ignore autocomplete="off" for username and password fields, but these are address fields for a contact.


Solution

  • It seems you can't disable autocomplete in a similar way. Safari looks for certain keywords in the id of the element and if there is something like "name", "address", "e-mail" etc., it enables the autocomplete function (tested on Safari 10.1.1).
    So, the only simple workaround that I've found is to use a different id that doesn't trigger the autocomplete function.

    EDIT: I found out that Safari also uses the placeholder attribute to determine whether to enable autocomplete function or not.