如何在React表单中彻底禁用邮箱和密码字段的自动补全建议？

针对Chrome浏览器无视常规autoComplete="off"设置的情况，可以试试以下几个更有效的方案：

1. 表单+输入框同时设置自动补全属性 #

Chrome有时会优先读取表单层级的自动补全配置，给包裹输入框的<form>标签也加上属性，同时密码字段使用autoComplete="new-password"（这是Chrome官方认可的禁用密码自动填充的属性值，比off优先级更高）：

<form autoComplete="off">
  <input
    type="email"
    placeholder="Enter your email"
    onChange={(e) => handleEmailChange(e.target.value)}
    autoComplete="off"
    name="email-random-xyz"
  />
  <input
    type="password"
    placeholder="Enter your password"
    onChange={(e) => handlePasswordChange(e.target.value)}
    autoComplete="new-password"
    name="password-random-abc"
  />
</form>

2. 利用readonly属性规避自动填充 #

给输入框默认添加readonly，聚焦时移除该属性，让浏览器无法提前识别为可填充字段：

import { useState } from 'react';

// 邮箱输入框相关状态
const [emailReadOnly, setEmailReadOnly] = useState(true);
// 密码输入框相关状态
const [pwdReadOnly, setPwdReadOnly] = useState(true);

// 邮箱输入框
<input
  type="email"
  placeholder="Enter your email"
  onChange={(e) => handleEmailChange(e.target.value)}
  autoComplete="off"
  name="email-field"
  readonly={emailReadOnly}
  onFocus={() => setEmailReadOnly(false)}
  onBlur={() => setEmailReadOnly(true)}
/>

// 密码输入框
<input
  type="password"
  placeholder="Enter your password"
  onChange={(e) => handlePasswordChange(e.target.value)}
  autoComplete="new-password"
  name="pwd-field"
  readonly={pwdReadOnly}
  onFocus={() => setPwdReadOnly(false)}
  onBlur={() => setPwdReadOnly(true)}
/>

3. 动态切换密码框类型 #

初始将密码框设为type="text"，聚焦后切换为type="password"，干扰Chrome的字段识别逻辑：

import { useState } from 'react';

const [pwdType, setPwdType] = useState("text");

<input
  type={pwdType}
  placeholder="Enter your password"
  onChange={(e) => handlePasswordChange(e.target.value)}
  autoComplete="off"
  name="pwd-random"
  onFocus={() => setPwdType("password")}
  onBlur={() => setPwdType("text")}
/>

4. 用户端Chrome设置调整（终极方案） #

如果以上技术方案都无效，可提示用户在Chrome中手动关闭对应网站的自动填充：

打开Chrome设置 → 隐私和安全 → 自动填充 → 密码管理 → 找到目标网站，删除保存的密码或关闭该网站的自动填充开关

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