How to disable autocomplete in address fields for

问题:

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?

<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.

回答1:

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.

回答2:

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‌irst N‌ame. The ‌ 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!

回答3:

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.

回答4:

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

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

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

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