在 React 测试站点上阻止 Chrome 自动填充电子邮件/密码？

Posted 2023-02-24

【中文标题】在 React 测试站点上阻止 Chrome 自动填充电子邮件/密码？

【英文标题】：Stop Chrome from AutoFill email/password on React test sites?

【发布时间】：2020-06-15 15:21:42

【问题描述】：

您好，我的具体问题是，无论我做什么，我都无法摆脱自动填充的电子邮件/密码。我使用的是 Mac，Chrome 是我的浏览器。

This is what happens every time I try to log in to an app I am making

我尝试删除所有保存的密码，选择电子邮件/密码，然后输入 fn-delete，删除我的 cookie/清空缓存。没有任何效果。

请帮忙，尝试测试我的应用或演示任何应用并拥有此自动填充功能真的很令人沮丧。

【参考方案1】：

您可以尝试启用/禁用您的字段 onFocus 和 onBlur，如下所示：

    ...
    const [readOnly, setReadOnly] = useState(true);
      return (
          <input
            readOnly=readOnly
            onFocus= () => setReadOnly(false) 
            onBlur= () => setReadOnly(true) 
          />
      );
     ...

【讨论】：

基于here 的所有讨论，以及我尝试过的不同技巧，您的答案似乎是唯一的解决方案，谢谢一百万！

【参考方案2】：

您应该将autoComplete="disabled" 属性添加到您不希望自动填充的每个输入字段。

Here's a good read on the topic。随着浏览器多年来兼容性的变化，您应该转到线程的底部以查看有效的答案。

【讨论】：

当我将它添加到我的代码中时它仍然会显示。