如何在Safari的地址字段中禁用自动完成功能？

Question

我有一个表单，我已经实现了自动提示下拉列表（通过jQueryUI），以便用户可以在我们的应用中搜索联系人并自动填写他们的信息。我希望在表单上禁用自动完成功能，但Safari（在macOS上）忽略autocomplete="off"。我已在输入字段以及<form>标记中指定了自动完成功能。此表单适用于朋友的物理邮寄地址，Safari正在显示来自Contacts.app的匹配联系人...但它覆盖了我的自动提示下拉列表中的下拉列表。如何强制Safari停止显示此下拉列表？

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

仅供参考 - 我知道大多数浏览器会忽略autocomplete="off"的用户名和密码字段，但这些是联系人的地址字段。

Answer 1

似乎您无法以类似方式禁用自动填充功能。 Safari会在元素的id中查找某些关键字，如果有“name”，“address”，“e-mail”等内容，则会启用自动完成功能（在Safari 10.1.1上测试） 。
因此，我发现的唯一简单的解决方法是使用不会触发自动完成功能的其他id。

编辑：我发现Safari还使用placeholder属性来确定是否启用自动完成功能。

Answer 2

只需在其他精细答案中添加一个皱纹即可...

我从经验上发现Safari从a）字段名称，b）相关标签或c）相邻文本中获取提示。它可以计算出诸如字段名“ name”，“ firstname”，“ lastname”之类的内容以及诸如“ name”，“ First name”，“ Last name”之类的标签或相邻文本。

在我的应用程序中，它正在与自定义自动填充竞争。我击败了我的下拉菜单，如下所示：

我将字段名从xx_firstname更改为mxyzptlk，标签从First Name更改为F‌irst N‌ame。 ‌字符是零宽度的非连接符。您无法在屏幕上看到它，但它似乎击败了Safari-至少目前如此！

Answer 3

我有同样的问题，重叠下拉菜单。您可以做的是通过将一个或一些字符更改为同形字符来更改“name”字符串（在输入的占位符中）。

我所做的是用'ɑ'字符更改'a'字符。看起来有点奇怪，但值得摆脱恼人的重叠。

请确保将其记录在html代码中。

另外，我注意到Safari使用输入上方P标签中的字段描述来触发自动完成功能。

Answer 4

我发现另一个基于@worddragon答案的黑客是使用Â和字母间距。

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

...然后添加// //根据字体大小调整字母间距

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