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?
<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 & 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.
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.
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.
链接地址: http://www.djcxy.com/p/26462.html上一篇: 禁用输入的值将不会被提交？