如何禁止Safari中HTML邮箱输入框显示自动填充下拉建议

问题背景 #

现有如下HTML输入框代码：

<input autocomplete="off" placeholder="Mail">

在Safari浏览器中点击该输入框时，即使已经配置autocomplete="off"，仍会弹出下拉列表展示已保存的邮箱地址作为自动填充建议，需要找到适配Safari的配置方式，阻止该自动填充提示弹出。

可行配置方案 #

• 替换autocomplete属性值为非标准随机值
  Safari会主动忽略标准的autocomplete="off"配置，可将属性值替换为浏览器无法识别的无意义随机字符串，让浏览器无法匹配自动填充规则，示例代码：

  <input autocomplete="disable-autofill-123" placeholder="Mail">
  

  注意属性值不要包含email、username、mail等语义化关键词，避免被Safari识别为待填充字段。
• 使用Safari认可的禁用自动填充属性值
  直接配置autocomplete="new-password"是目前兼容性最好的方案，Safari识别到该值后，不会拉取已保存的邮箱、账号类历史记录作为填充建议，同时也不会触发密码填充弹窗，示例代码：

  <input type="text" autocomplete="new-password" placeholder="Mail">
  

  注意：不要将输入框的type属性设为email，否则无论如何配置autocomplete属性，Safari都会强制触发邮箱自动填充下拉。
• 补充关闭输入辅助属性降低识别概率
  针对15.4以上版本的Safari，可以额外添加关闭输入校正、自动大写、拼写检查的属性，避免浏览器通过字段特征识别为邮箱字段触发填充，示例代码：

  <input
    type="text"
    autocomplete="new-password"
    autocorrect="off"
    autocapitalize="off"
    spellcheck="false"
    placeholder="Mail"
  >
  

实测提示：如果上述属性配置后仍有填充提示，可以给输入框的name、id属性也设置为无意义的随机字符串，不要带mail、email、account等关键词，彻底规避Safari的字段特征识别规则。

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