如何禁用Chrome自动完成功能？

Question

我们要在我们的React JavaScript应用程序中的Chrome浏览器中禁用自动完成。我们尝试了Internet上可用的一堆解决方案，但没有任何效果。 autoComplete=off不可靠，其他方法也不可靠。

此刻对我们而言确实很重要，所以您能为我们推荐一种使用React JavaScript在Chrome中禁用自动完成功能的简单方法吗？

第二，我们为文本框使用一个公共控件/组件，并在各处使用它们

Answer 1

4
投票

执行autocomplete="new-password"以禁用自动完成。

Answer 2

您可以通过添加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 3

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

Answer 4

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

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

Answer 5

我找到了一个可实现此目的的jQuery插件。