如何在React JS中禁用浏览器的托管凭证建议？

试试这几个经过验证的方法，解决你遇到的autoComplete=off无效的问题：

• 使用autoComplete="new-password"
  这是W3C推荐的专门用于新密码输入的属性值，大部分现代浏览器都会识别并禁用密码建议。React中的写法：

  <input
    type="password"
    autoComplete="new-password"
    name="new-user-password"
    placeholder="设置新密码"
  />
  

• 用隐藏输入框“吸收”自动填充
  针对部分顽固浏览器（比如Chrome），可以在真实输入框前添加两个隐藏的假输入框，让浏览器把凭证填充到假框里，真实框就不会弹出建议了：

  {/* 隐藏的假输入框，用于承接浏览器自动填充 */}
  <input
    type="text"
    style={{ position: 'absolute', opacity: 0, zIndex: -1 }}
    autoComplete="username"
  />
  <input
    type="password"
    style={{ position: 'absolute', opacity: 0, zIndex: -1 }}
    autoComplete="current-password"
  />
  
  {/* 真实的登录输入框 */}
  <input
    type="text"
    placeholder="用户名"
    autoComplete="off"
  />
  <input
    type="password"
    placeholder="密码"
    autoComplete="off"
  />
  

• 动态设置随机的name属性
  浏览器是通过输入框的name/id关联保存的凭证，每次渲染给输入框设置一个随机的name值，让浏览器无法匹配到历史凭证：

  import { useState, useEffect } from 'react';
  
  function PasswordInput() {
    const [randomName, setRandomName] = useState('');
  
    useEffect(() => {
      // 每次组件渲染生成随机name
      setRandomName(`password-${Math.random().toString(36).slice(2)}`);
    }, []);
  
    return (
      <input
        type="password"
        name={randomName}
        autoComplete="off"
        placeholder="请输入密码"
      />
    );
  }
  

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