多个电子邮件输入由不同 name/id/placeholder 的自动填充填充

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>

使用 google chrome，那时您所要做的就是将 autocomplete=false 添加到标签中，它不会向表单的部分添加自动更正。当前的解决方法是将 autocomplete="nofill" 放入每个标签中。

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

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

多个电子邮件输入由不同 name/id/placeholder 的自动填充填充

Multiple email input get populated by autofill with different name/id/placeholder

html

google-chrome

input

autofill