React项目中禁用Chrome浏览器用户名和密码自动填充方案

Chrome对autocomplete="off"的支持在用户名/密码字段上存在兼容性问题，以下是几种经过验证的解决方案：

1. 替换autocomplete="off"为autocomplete="new-password" #

Chrome会忽略密码框的autocomplete="off"，但会识别new-password为"新密码创建"字段，从而跳过自动填充。对于用户名框，可以配合使用autocomplete="username"或自定义值：

<input
  type="text"
  name="username"
  autocomplete="username"
  placeholder="用户名"
/>
<input
  type="password"
  name="password"
  autocomplete="new-password"
  placeholder="密码"
/>

2. 动态修改输入框类型 #

初始将密码框设为type="text"，组件挂载后再改为password，绕过Chrome的自动填充识别：

import { useEffect, useRef } from 'react';

const LoginForm = () => {
  const passwordInputRef = useRef(null);

  useEffect(() => {
    if (passwordInputRef.current) {
      passwordInputRef.current.type = 'password';
    }
  }, []);

  return (
    <form>
      <input
        type="text"
        name="user"
        autocomplete="off"
        placeholder="用户名"
      />
      <input
        ref={passwordInputRef}
        type="text"
        name="pass"
        autocomplete="off"
        placeholder="密码"
      />
    </form>
  );
};

export default LoginForm;

3. 添加隐藏的"诱饵"输入框 #

在真实输入框前放置两个隐藏的输入框，让Chrome优先填充这些诱饵字段，真实输入框就不会被自动填充：

<form>
  {/* 诱饵输入框：绝对定位+透明，不占用页面空间 */}
  <div style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }}>
    <input type="text" name="fake-username" autocomplete="username" />
    <input type="password" name="fake-password" autocomplete="password" />
  </div>

  {/* 真实输入框 */}
  <input type="text" name="username" autocomplete="off" placeholder="用户名" />
  <input type="password" name="password" autocomplete="off" placeholder="密码" />
</form>

4. 自定义name属性值 #

Chrome会根据输入框的name属性识别字段类型，使用非标准的name值（比如不用"username"/"password"），配合autocomplete="off"可以降低被自动填充的概率：

<input
  type="text"
  name="user-account"
  autocomplete="off"
  placeholder="用户名"
/>
<input
  type="password"
  name="user-secret"
  autocomplete="off"
  placeholder="密码"
/>

注意：不同Chrome版本的行为可能略有差异，建议在目标版本中测试验证。

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