CODEWITHSUNDEEP
htmlmacosautocompletesafari
dignoe
dignoe

Reputation: 1033

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.

Upvotes: 19

Views: 10179

Answers (4)

wordragon
wordragon

Reputation: 1357

Just to add one wrinkle to the other fine answers...

I found empirically that Safari get its hints from a) the name of the field, b) the associated label, or c) adjacent text. It figures out things like field names "name", "firstname", "lastname", and labels or adjacent text like "name", "First name", "Last name".

In my application, it was competing with a custom autofill. I defeated my dropdown as follows:

I changed my field name from xx_firstname to mxyzptlk, and the label from First Name to F&zwnj;irst N&zwnj;ame. The &zwnj; character is a zero width non-joiner. You can't see it on the screen, but it appears to defeat Safari - at least for now!

Edit made by @BIUBIU UP: If you are using React or Vue, you may need Unicode values for &zwnj: '\u200c'.

Upvotes: 15

Liam
Liam

Reputation: 2837

Another hack I found based on @worddragon answer was to use   and letter-spacing. 

  disableAutoFillHack(localizedContent) {
    return localizedContent.split('').join('&nbsp;');
  }

...and then add // adjust the letter spacing based on the font sizes

  .autofill__disable {
    letter-spacing: -0.125em;
  }

Upvotes: -2

Bartb
Bartb

Reputation: 65

I had the same problem, overlapping dropdowns. What you could do is change the 'name' string (in the input's placeholder) by changing one or some of the characters into a homoglyph.

What I did was change the 'a' character with 'ɑ' character. Looks a bit weird, but it's worth getting rid of the annoying overlap.

Just make sure you document it in the html-code.

Also, I noticed that the field's description in a P tag above the input was used by Safari to trigger the autocomplete function.

Upvotes: -2

Matteo Milesi
Matteo Milesi

Reputation: 379

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.

Upvotes: 18

Related Questions