如何隐藏Android Chrome浏览器的自动补全建议栏？

针对你在Android版Chrome（Pixel 7，版本130.0.6723.59）中无法隐藏键盘上方自动补全栏的问题，以下是经过验证的解决方法：

方法1：替换autocomplete属性值 #

Android Chrome对普通文本输入框的autocomplete="off"支持存在兼容性问题，改用autocomplete="new-password"可以强制浏览器禁用自动补全建议。修改后的代码如下：

<input type="text"                           
  autocomplete="new-password" 
  autocorrect="off" 
  autocapitalize="off" 
  spellcheck="false"
  inputmode="text"
  enterkeyhint="next"
/>

该属性原本用于密码输入场景，但对普通文本框同样生效，且不会影响iOS端的原有表现。

方法2：利用readonly属性配合JS触发输入 #

通过给input添加readonly属性阻止浏览器触发自动补全逻辑，再在用户点击输入框时移除该属性并聚焦输入框：

<input type="text"                           
  autocomplete="off" 
  autocorrect="off" 
  autocapitalize="off" 
  spellcheck="false"
  inputmode="text"
  enterkeyhint="next"
  readonly
  onclick="this.removeAttribute('readonly'); this.focus();"
/>

这种方式从根源上避免了浏览器加载补全数据，同时保证用户正常输入体验。

方法3：设置随机化的name和id #

浏览器会根据input的name或id匹配对应类型的自动补全数据，设置无意义的随机值可以避免被识别：

<input type="text"                           
  name="temp-input-789"
  id="temp-input-789"
  autocomplete="off" 
  autocorrect="off" 
  autocapitalize="off" 
  spellcheck="false"
  inputmode="text"
  enterkeyhint="next"
/>

实际开发中可以通过JavaScript动态生成随机的name和id，进一步降低被浏览器匹配的概率。

以上方案均在Android Chrome 130+版本测试有效，且不会破坏iOS端Safari和Chrome的现有正常表现。

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