如何在平板端Chrome浏览器中隐藏input触发的自动填充提示框

Chrome的自动填充逻辑不会识别autocomplete="no"这类自定义值，只有符合规范的特殊属性值才能触发生效，以下是实测可用的解决方案：

• 方案1：替换autocomplete属性值为new-password
  这个属性是W3C为新密码设置场景定义的标准值，Chrome识别后会直接跳过已有密码的填充提示，修改代码如下：

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
    </head>
    <body>
      <input type="password" autocomplete="new-password" />
    </body>
  </html>
  

• 方案2：配合只读属性阻断触发逻辑
  如果方案1不生效，可以通过动态切换readonly属性，让输入框刚获得焦点时不满足自动填充的触发条件：

  <input type="password" autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly')" onblur="this.setAttribute('readonly', true)"/>
  

• 方案3：添加占位假输入框承接自动填充
  如果以上方案都失效，可以在真实输入框前加两个隐藏的同类型输入框，让Chrome的自动填充逻辑绑定到假输入框上，不会触发真实输入框的弹窗：

  <!-- 隐藏的占位输入框 -->
  <input type="text" style="display:none">
  <input type="password" style="display:none">
  <!-- 真实输入框 -->
  <input type="password" autocomplete="new-password" />
  

以上方案在Chrome 94安卓平板版本实测可完全屏蔽自动填充弹窗。

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