我的网站未显示 Chrome 电子邮件字段自动填充选项

Posted 2023-03-05

【中文标题】我的网站未显示 Chrome 电子邮件字段自动填充选项

【英文标题】：Chrome email field autocomplete options not showing for my website

【发布时间】：2017-07-12 09:48:43

【问题描述】：

当我第一次访问许多新网站时，我发现：

对于某些网站，将光标放在注册表单的电子邮件字段中会立即显示我在其他网站中输入的电子邮件选项。 对于其他网站，将光标放在电子邮件字段中不会给我任何电子邮件选项。而且，我必须手动输入电子邮件的每个字母。

我找不到区分这两种情况的代码。对于我的网站，我坚持使用#2。我正在努力实现#1，用户可以重复使用在其他网站中输入的电子邮件。

我使用了一些这样的代码：

<input type="email" name="email" id="frmEmailA" placeholder="[e-mail]" required autocomplete="email">

【问题讨论】：

使用autocomplete="on"w3schools.com/TAGs/att_input_autocomplete.asp

分享你的 html 表单代码 sn-p 以及你在哪个浏览器上测试

autocomplete 属性并不是实现自动填写表单所需的一切。您还需要适当的浏览器隐私设置。您为属性提供的值不正确并不重要 - 默认情况下，任何不等于 off 的值都将激活表单自动完成。

此外，您必须区分普通表单中的电子邮件输入字段和输入与密码字段组合的表单（电子邮件字段是用户名）。在这种情况下，浏览器使用完全不同的自动完成机制（即密码管理器而不是普通形式的自动完成）。此输入与密码输入的形式相同吗？

【参考方案1】：

自动完成属性的正确值是 "on" 或 "off"，您可以在以下位置看到：https://www.w3schools.com/Tags/att_input_autocomplete.asp

【参考方案2】：

区别在于input元素的autocomplete属性。

语法： <input autocomplete="">

它允许浏览器根据之前填充的数据自动填充输入字段。

因此，在 #1 中，autocomplete 属性的值应为 on。

演示

E-mail: <input type="email" name="email" autocomplete="on">

在#2中autocomplete属性的值应该是off。

演示

E-mail: <input type="email" name="email" autocomplete="off">

【参考方案3】：

您似乎要启用autocomplete，但是您指定了错误的属性。

语法：

自动完成=“开|关”

但是，为了保存第一次输入的电子邮件地址，您需要有一个带有method="POST" 属性的form 标签。还建议使用autocompletetype 属性来帮助浏览器更准确地填充表单。

注意：在某些情况下，在较旧的浏览器上，如果表单没有操作，您可能还需要添加操作。 action="javascript:void(0)" 有效。

开启自动完成和method="POST"的示例：

<form method="POST" action="javascript:void(0)">
    <input type="email" name="email" id="frmEmailA" placeholder="[e-mail]" required autocomplete="on" autocompletetype=”email”>
    <input type="submit">
</form>

一个没有自动完成和method="POST"的例子：

<form>
    <input type="email" name="email" id="frmEmailA" placeholder="[e-mail]" required autocomplete="off">
    <input type="submit">
</form>

另见How to trigger Autofill in Google Chrome?

【参考方案4】：

到目前为止的答案是错误的/过时的或不完整的。

使用autocomplete="email" 是perfectly valid。但是浏览器目前并不能很好地处理它。在 Firefox 和 Chrome 中，只有 name 属性用于自动完成。所以你应该坚持name="email"。

如果 Chrome 用户真的想对autocomplete 支持的每种类型进行适当的自动补全，他/她必须填写Autofill settings。填写完这些设置后，自动补全不再依赖name属性，而是使用autocomplete的类型。 IE。它将为带有autocomplete="email" 的字段建议用户的电子邮件地址。

所以为了得到最好的浏览器支持，你应该保留<input name="email" autocomplete="email" [...]>。只要至少有一个带有name="email" 或预填充自动填充设置的提交表单，浏览器实际上应该自动完成您的输入字段。

更多资源：

caniuse: autocomplete attribute: on & off values caniuse: input[autocomplete] (values besides on/off)

对于某些网站，将光标放在注册表单的电子邮件字段中会立即显示我在其他网站中输入的电子邮件选项。

我无法在 Mac OS X 上的最新 Chrome 上重现该内容。实际上，您必须双击输入才能显示自动补全。

【讨论】：

@SagarV 我知道，这就是我写“坚持”它的原因。我还解释了 Chrome 的自动填充功能是如何工作的。

【参考方案5】：

在form tag 中使用autocomplete="on"。如下所示。

<form action="" method="post" autocomplete="on">
    <input type="email" name="email" id="frmEmailA" placeholder="[e-mail]" required>
    <input type="submit" value="Submit">
</form>