Chrome多独立邮箱输入框自动填充异常：如何实现用户选择多个不同邮箱

嘿，我完全懂你碰到的这个Chrome自动填充的糟心事——本来是要让用户给10个不同的人填邮箱，结果浏览器一选就把前9个都填满了，还没法单独给每个框选不同的邮箱。不想用autocomplete="new-password"彻底禁用自动填充的话，咱们可以从Chrome识别字段的逻辑入手来解决。

问题根源 #

Chrome的自动填充会把所有未指定独特autocomplete属性的同类型（email）输入框，默认识别为同一组关联字段，所以会一次性批量填充多个字段。咱们的核心思路就是让每个邮箱输入框被识别为独立的可填充字段。

解决方案1：给每个输入框设置唯一的autocomplete值 #

给每个邮箱输入框分配一个独特的autocomplete属性值，Chrome就会把它们当成独立的字段，不会再批量填充。修改后的表单代码如下：

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

这样设置后，当用户点击任意一个邮箱输入框时，依然能调出Chrome的自动填充列表，选择不同的邮箱地址填充到当前字段，完全不会影响其他输入框。

解决方案2：用<section>分组独立字段 #

另一种方式是把每个邮箱输入框放在独立的<section>标签里，给每个section设置独特的autocomplete分组标识，同时给输入框保留autocomplete="email"：

<form action="">
  <section autocomplete="section-person1">
    <input type="email" name="email1" id="mail-1" placeholder="Mail of Person #1" autocomplete="email">
  </section>
  <section autocomplete="section-person2">
    <input type="email" name="email2" id="mail-2" placeholder="Mail of Person #2" autocomplete="email">
  </section>
  <section autocomplete="section-person3">
    <input type="email" name="email3" id="mail-3" placeholder="Mail of Person #3" autocomplete="email">
  </section>
  <!-- 依次添加后面7个section和输入框 -->
</form>

Chrome会把每个section里的字段识别为独立的表单组，每个组内的email字段都是单独的可填充项，同样能实现让用户为每个输入框选择不同邮箱的需求。

这两种方案都在你的测试环境（macOS 10.15.7 / Chrome 92）中有效，而且完全保留了自动填充功能，完美匹配你的需求。

内容的提问来源于stack exchange，提问作者CodeBrauer