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

Question

在具有不同名称、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 上测试。

Answer 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 并禁用您放置该属性的自动完成功能。

据我所知，这是很久以前报告的一个错误。