禁用 html 输入电子邮件字段的自动填充

Question

我有以下html代码：

<input autocomplete="off" placeholder="Mail">

当我在 Apples Safari 浏览器中打开它并单击输入字段时，会出现一个下拉列表，显示我的电子邮件地址作为自动填充的建议。

它看起来像这样：

如何防止 Safari 显示它？

（也许在其他浏览器中也会出现相同的行为，但我无法对其进行测试。另外，Safari 是主要目标受众。）

Answer 1

要禁用表单中的自动完成功能，您可以将 autocomplete 属性设置为“off”：

autocomplete="off"

autocomplete="false" or autocomplete="new-password"

您可以对整个表单或表单中的特定输入元素执行此操作：

<form method="post" action="/form" autocomplete="off">
[…]
</form>

或者

<input role="presentation" autocomplete="off" />

或尝试为输入添加一些 CSS

input::-webkit-contacts-auto-fill-button, 
input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  position: absolute;
  top: -50px;
}

但我认为 Chrome 和 Mozilla 就是这种情况，而不是 Safari

只有您在 safari 中可以禁用设置，但对于 User ：

In macOS, choose Safari > Preferences > AutoFill.