如何在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 从 a) 字段名称、b) 相关标签或 c) 相邻文本中获取提示。它计算出诸如字段名称“姓名”、“名字”、“姓氏”以及标签或相邻文本（如“姓名”、“名字”、“姓氏”）之类的内容。

在我的应用程序中，它与自定义自动填充竞争。我击败了我的下拉列表如下：

我将字段名称从 更改xx_firstname为mxyzptlk，将标签从First Name更改为F‌irst N‌ame。该‌字符是零宽度的非连接器。你在屏幕上看不到它，但它似乎打败了 Safari——至少现在是这样！

Answer 2

看来您无法以类似方式禁用自动完成功能。Safari id在元素的中查找某些关键字，如果存在诸如“名称”，“地址”，“电子邮件”等之类的内容，它将启用自动完成功能（在Safari 10.1.1上进行了测试）。
因此，我发现的唯一简单的解决方法是使用id不会触发自动完成功能的其他方法。

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