Edge自动填充问题：多邮箱输入框被批量填充同一值的优化需求

以下是几个无需禁用autocomplete且能避免批量填充的可行方案：

• 为每个邮箱输入框设置唯一的autocomplete属性值
  不要给所有输入框都用autocomplete="email"，而是给每个框分配独特的标识值，比如：

  <input type="email" autocomplete="email-primary" name="primary_email">
  <input type="email" autocomplete="email-secondary" name="secondary_email">
  <input type="email" autocomplete="email-tertiary" name="tertiary_email">
  

  Edge浏览器会根据不同的autocomplete值识别为独立字段，不会统一填充同一内容。

• 利用readonly+聚焦事件控制可编辑状态
  初始将未操作的邮箱输入框设为readonly，当用户聚焦该输入框时再移除readonly属性。示例代码：

  <input type="email" autocomplete="email" readonly onfocus="this.removeAttribute('readonly')">
  <input type="email" autocomplete="email" readonly onfocus="this.removeAttribute('readonly')">
  

  因为Edge的自动填充只会作用于可编辑（非readonly）的字段，未被激活的只读输入框不会被自动填充，用户点击后才变为可编辑状态，此时浏览器只会填充当前激活的字段。

• 结合独特name属性与细分autocomplete值
  给每个输入框设置唯一的name，同时使用浏览器能识别的细分邮箱类autocomplete值，比如：

  <input type="email" name="work_email" autocomplete="work email">
  <input type="email" name="personal_email" autocomplete="home email">
  

  这种方式利用浏览器对不同场景邮箱字段的区分逻辑，避免批量填充。

这些方案都不需要禁用autocomplete，也无需事后过滤重复值，直接从根源上阻止Edge的批量填充行为。

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