如何禁用 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

中查找某些关键字，如果有“名称”、“地址”、“电子邮件”等内容，则会启用自动完成功能（在 Safari 10.1.1 上测试）。
因此，我发现的唯一简单的解决方法是使用不触发自动完成功能的不同

id

。

编辑：我发现Safari还使用

placeholder

属性来确定是否启用自动完成功能。

Answer 2

只是为了给其他好的答案添加一点皱纹......

我凭经验发现 Safari 从 a) 字段名称、b) 关联标签或 c) 相邻文本中获取提示。它可以计算出字段名称“名称”、“名字”、“姓氏”等内容，以及标签或相邻文本（如“名称”、“名字”、“姓氏”）。

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

我将字段名称从

xx_firstname

更改为

mxyzptlk

，并将标签从

First Name

更改为

F‌irst N‌ame

。

‌

字符是零宽度非连接符。你在屏幕上看不到它，但它似乎击败了 Safari - 至少目前如此！

由 @BIUBIU UP 进行的编辑：如果您使用的是 React 或 Vue，则可能需要 &zwnj 的 Unicode 值：'\u200c'。

Answer 3

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

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

只需确保将其记录在 html 代码中即可。

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

Answer 4

我根据@worddragon 答案发现的另一个技巧是使用 和字母间距。

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

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

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