HTML表单禁用autofill功能失效，如何通过HTML或JavaScript解决？

目前Chrome、Firefox、Edge 80+等主流浏览器为了优化用户填写表单的体验，会主动忽略元素上的autocomplete="off"配置，优先匹配用户已保存的填充信息弹出建议。另外你提到的autofill=off属于非标准属性，浏览器不会识别该配置，标准控制自动填充的属性为autocomplete。

• 设置autocomplete="new-password"
  该属性原本用于告知浏览器不要填充已保存的旧密码，适配所有不需要自动填充的输入框场景，是目前兼容性最好的方案。
  代码示例：

  <input type="text" name="username" autocomplete="new-password">
  

• 动态生成随机的name、id属性
  浏览器自动填充逻辑依赖输入框的name、id属性做语义匹配，如果每次渲染页面时都给对应输入框生成无意义的随机字符串作为name、id值，浏览器找不到匹配的填充信息就不会弹出建议。
• 插入隐藏的占位输入框
  在实际使用的输入框前插入两个隐藏的账号、密码输入框，让浏览器把自动填充的内容写入隐藏框，不会影响实际输入项。
  代码示例：

  <!-- 隐藏的占位输入框，占用自动填充匹配位 -->
  <input type="text" name="fake-user" style="display:none">
  <input type="password" name="fake-pwd" style="display:none">
  <!-- 实际业务输入框 -->
  <input type="text" name="real-user">
  <input type="password" name="real-pwd">
  

• 临时设置readonly属性
  浏览器不会给只读输入框弹出填充建议，可以给输入框默认加readonly属性，等用户触发聚焦后再移除该属性。
  代码示例：

  <input type="text" name="username" readonly onfocus="this.removeAttribute('readonly')">
  

如果HTML方案无法覆盖全部场景，可以配合JS做额外处理：

• 聚焦时动态修改autocomplete属性
  代码示例：

  document.querySelectorAll('input').forEach(input => {
    input.addEventListener('focus', () => {
      input.setAttribute('autocomplete', 'new-password')
    })
  })
  

• 拦截自动填充事件清空内容
  浏览器触发自动填充时触发的输入事件isTrusted属性为false，可以通过该判断清空自动填充的内容。
  代码示例：

  const targetInput = document.querySelector('#target-input')
  targetInput.addEventListener('input', e => {
    if (!e.isTrusted) targetInput.value = ''
  })
  

• 动态创建输入框
  页面初始化时不渲染需要禁用填充的输入框，等DOM加载完成后再通过JS动态插入到页面中，部分浏览器不会给动态生成的输入框触发自动填充逻辑。

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