通过使用不同名称/ID/占位符的自动填充填充多个电子邮件输入答案

【问题标题】：Multiple email input get populated by autofill with different name/id/placeholder通过使用不同名称/ID/占位符的自动填充填充多个电子邮件输入
【发布时间】：2021-10-21 00:24:21
【问题描述】：

在具有多个电子邮件输入且名称、ID 和占位符不同的表单中，chrome 一次始终自动填充 9 个字段。当然，我可以禁用自动填充（使用autocomplete="new-password"），这样就解决了问题。

但是我该怎么做，用户可以从他的自动填充中选择多个不同的电子邮件？

<form action="">
    <input type="email" name="email1" id="mail-1" placeholder="Mail of Person #1">
    <input type="email" name="email2" id="mail-2" placeholder="Mail of Person #2">
    <input type="email" name="email3" id="mail-3" placeholder="Mail of Person #3">
    <input type="email" name="email4" id="mail-4" placeholder="Mail of Person #4">
    <input type="email" name="email5" id="mail-5" placeholder="Mail of Person #5">
    <input type="email" name="email6" id="mail-6" placeholder="Mail of Person #6">
    <input type="email" name="email7" id="mail-7" placeholder="Mail of Person #7">
    <input type="email" name="email8" id="mail-8" placeholder="Mail of Person #8">
    <input type="email" name="email9" id="mail-9" placeholder="Mail of Person #9">
    <input type="email" name="email10" id="mail-10" placeholder="Mail of Person #10">
</form>

演示：https://jsfiddle.net/xhtv781s/ 带数组命名的演示：https://jsfiddle.net/1kuvfasq/

在 macOS 10.15.7 / Chrome 92 上测试。

【问题讨论】：

我在所有浏览器中都禁用了自动填充，所以我不得不问：所有自动填充字段中的电子邮件地址是否相同？
我不认为你想要做的事情是可能的。
@DavidsaysreinstateMonica 是的 - 都一样，检查屏幕 gif

标签： html google-chrome input autofill

【解决方案1】：

我已编辑您的 HTML 代码以解决此问题。请允许我解释一下。

<form action="">
    <input autocomplete="nofill" type="email" name="email1" id="mail-1" placeholder="Mail of Person #1">
    <input autocomplete="nofill" type="email" name="email2" id="mail-2" placeholder="Mail of Person #2">
    <input autocomplete="nofill" type="email" name="email3" id="mail-3" placeholder="Mail of Person #3">
    <input autocomplete="nofill" type="email" name="email4" id="mail-4" placeholder="Mail of Person #4">
    <input autocomplete="nofill" type="email" name="email5" id="mail-5" placeholder="Mail of Person #5">
    <input autocomplete="nofill" type="email" name="email6" id="mail-6" placeholder="Mail of Person #6">
    <input autocomplete="nofill" type="email" name="email7" id="mail-7" placeholder="Mail of Person #7">
    <input autocomplete="nofill" type="email" name="email8" id="mail-8" placeholder="Mail of Person #8">
    <input autocomplete="nofill" type="email" name="email9" id="mail-9" placeholder="Mail of Person #9">
    <input autocomplete="nofill" type="email" name="email10" id="mail-10" placeholder="Mail of Person #10">
</form>

使用谷歌浏览器，您当时所要做的就是将autocomplete=false 添加到标签中，它不会为您的表单部分添加自动更正功能。当前解决此问题的方法是将autocomplete="nofill" 添加到您的每个标签中。

现在您可以将 nofill 更改为您想要的任何内容，因为这会混淆 google chrome 并禁用您放置该属性的自动完成功能。

据我所知，This is a bug that was reported a long time ago.

【讨论】：

谢谢。按预期工作正常。再一次，一个既不在 MDN 也不在谷歌文档上正式找到的功能。 developers.google.com/s/results/web?q=nofill / developer.mozilla.org/en/search?q=nofill
我在文本中使用“nofill”的原因是谷歌浏览器不会自动完成。它本身不是一个属性，而是一个临时的错误/修复，可以纠正这种情况。我确实在寻找其他解决方案，但在给定的时间之后，这是我可以推荐的最好的解决方案，直到 Google 的开发团队解决此问题。