在React JS中禁用chrome自动完成功能

Question

友

我们希望在我们的React JS应用程序中禁用Chrome浏览器中的自动完成。我们已尝试在互联网上提供大量解决方案，但没有任何效果。 autoComplete=off不可靠，其他方式也不可靠。

这对我们来说非常重要所以您能否建议我们使用React js在Chrome中禁用自动填充的简单方法？

其次，我们在文本框中使用通用控件/组件并在任何地方使用它们

Answer 1

包括new-password在内的所有内容对我都无济于事，所以我就是这样做的：

onFocus={(event) => {
  event.target.setAttribute('autocomplete', 'off');
  console.log(event.target.autocomplete);
}}

Answer 2

执行autocomplete="new-password"以禁用自动填充功能。

Answer 3

我的React项目也遇到了同样的问题。我的解决方案是对autoComplete属性使用随机字符串。根据{{​​3}}，请不要使用“ off”，您需要设置一个无效值才能真正关闭自动完成功能。 还请注意，属性名称在React中必须为autoComplete。

Answer 4

唯一对我有用的技巧是创建隐藏的输入并为原始输入名称添加随机数：

<input type="text" name="" value="" readOnly={true} style={{display: "none"}}/>
<input
  type="text"
  name={"address " + Math.random()}
/>

Answer 5

您可以通过添加onFocus属性来覆盖Chrome自动填充。

render()
{
  return <input type="text" name="name" value="this is my input" autoComplete="off" onFocus={this.onFocus} />
}

在onFocus方法中，我们需要通过javaScript更改“自动完成”属性。

onFocus = event => {

   if(event.target.autocomplete)
   {
     event.target.autocomplete = "whatever";
   }

};

此解决方案对我有用。

让我知道它是否对您有用；）

Answer 6

使用jsx时-您必须拥有驼峰式大小写属性；因此autoComplete="new-password"而不是autocomplete。