html - 多个电子邮件输入由具有不同名称/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 并在您放置该属性时禁用自动完成功能。
据我所知， This is a bug that was reported a long time ago.