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

Question

我有一个表单，我在其中实现了自动建议下拉菜单(通过 jQueryUI)，以便用户可以在我们的应用程序中搜索联系人并自动填写他们的信息。我想在表单上禁用自动完成功能，但 Safari(在 macOS 上)忽略了 autocomplete="off" .我已经在输入字段以及 <form> 中指定关闭自动完成功能标签。此表单用于 friend 的实际邮寄地址，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 中查找某些关键字，如果有“名称”、“地址”、“电子邮件”等内容，它会启用自动完成功能(在 Safari 10.1 上测试.1).
因此，我发现的唯一简单解决方法是使用不会触发自动完成功能的不同 id。

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