Safari：自定义自动完成和系统联系人自动填充之间的冲突答案

【问题标题】：Safari: Conflict between custom auto complete and system contact autofillSafari：自定义自动完成和系统联系人自动填充之间的冲突
【发布时间】：2017-02-26 11:20:52
【问题描述】：

我们有一个网页，其中包含一个文本 <input>，我们附加了一个自定义自动完成组件（准确地说是使用 AngularStrap 的 Typeahead）。

Safari 显然认为，输入包含一个人的姓名，因此提供了一个自动填充菜单，其中包含从系统地址簿填充的值（屏幕截图顶部的小菜单；还请注意 Safari 添加的相应图标，以绿色圈出）。

这会导致以下问题：

该字段标题为“姓名”，但它不旨在包含人名。所以提供人的建议是没有意义的。
Safari 的内置菜单掩盖了我们的自定义建议菜单，如屏幕截图中下面 Safari 的建议。

我尝试了以下方法来摆脱 Safari 的建议：

将name 和id 属性从“名称”更改为“标题”或“GoToHellSafari”。没有帮助。
添加autocomplete="off"，添加autocomplete="false"。没有帮助。
将<label> 中的实际文本更改为“名称”以外的内容，例如“标题”。 这行得通，自动填充消失了。
通过删除id 和name 属性来切断<input> 与其<label> 之间基于id 的连接。没有帮助。

虽然选项 (3) 看起来很有希望，但我有以下明显的问题：我希望该标签显示为“名称”。有什么建议吗？

【问题讨论】：

标签： html autocomplete safari autofill angular-strap

【解决方案1】：

这个用户有一个很好的解决方案，您可以完全隐藏自动填充按钮： https://stackoverflow.com/a/39885072/20526

【讨论】：

谢谢，这似乎是一个好的开始。但是，它只隐藏了 icon，而不是自动填充菜单，这会掩盖我的自定义菜单。
我明白了。好吧，如果我们可以隐藏图标，那么我们可能也可以找到菜单并将其隐藏。不过，我太确定如何找到它了。

【解决方案2】：

在输入字段中隐藏自动填充 Safari 图标：

::-webkit-contacts-auto-fill-button, ::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

【讨论】：

请查看现有答案。这只是隐藏图标，而不是菜单。

【解决方案3】：

我知道这是几个月前的事了。我今天刚遇到同样的问题。但就我而言，这是一个简单的文本字段，必填字段。问题不在于所有必填字段，而只是一些。花几个小时发疯，查看我代码中的所有行...

奇怪的是我的同事，使用相同的操作系统，相同版本的 Safari 等。没有相同的问题。

最后，我发现这是由于我几天前安装的扩展程序造成的。所以也许你也应该看看你安装的扩展，其中一个可能是原因。

希望对你有帮助

【讨论】：