已设置autoComplete="off"，Chrome仍显示自动填充建议如何解决？

AI 小北

2026-7-15

解决Chrome忽略autoComplete="off"仍显示自动填充的问题

以下是几种实测有效的解决方案：

替换autoComplete属性值
将autoComplete="off"替换为autoComplete="new-password"，这个属性是Chrome针对避免密码自动填充设计的，非密码输入框同样适用——浏览器会判定这是无需关联已有账号的新字段，从而停止自动填充。修改后代码示例：
```
<input
  disabled={disabled}
  type={type}
  autoComplete="new-password"
  className={`ip__input ${className}`}
  {...(register && register(name))}
  {...rest}
  maxLength={fieldLimit || 100}
/>
```
防止register覆盖属性
如果你使用react-hook-form的register方法，它可能自动生成autoComplete相关属性覆盖手动设置的值。可以通过两种方式解决：
1. 在register中显式指定：
```
{...(register && register(name, { autoComplete: 'off' }))}
```
2. 调整属性顺序，让手动设置的autoComplete放在最后（覆盖register或rest中的值）：
```
<input
  disabled={disabled}
  type={type}
  className={`ip__input ${className}`}
  {...(register && register(name))}
  {...rest}
  autoComplete="off"
  maxLength={fieldLimit || 100}
/>
```

添加隐藏前置假输入框
在目标输入框前添加两个隐藏的输入框，引导Chrome自动填充这些无效字段，跳过真实输入框：

{/* 隐藏的假输入框，用于误导Chrome自动填充 */}
<input type="text" style={{display: 'none', position: 'absolute'}} autoComplete="username" />
<input type="password" style={{display: 'none', position: 'absolute'}} autoComplete="current-password" />

{/* 你的真实输入框 */}
<input
  disabled={disabled}
  type={type}
  autoComplete="off"
  className={`ip__input ${className}`}
  {...(register && register(name))}
  {...rest}
  maxLength={fieldLimit || 100}
/>