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

【问题标题】：How to disable Chrome autocomplete feature?如何禁用 Chrome 自动完成功能？
【发布时间】：2018-10-25 03:10:35
【问题描述】：

我们想在我们的 React JavaScript 应用程序中禁用 Chrome 浏览器中的 自动完成。我们尝试了 Internet 上提供的大量解决方案，但都没有奏效。 autoComplete=off 不可靠，其他方式也不可靠。

此时这对我们来说真的很重要，所以您能否向我们推荐一种使用 React JavaScript 在 Chrome 中禁用自动完成功能的万无一失的方法？

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

【问题讨论】：

Chrome Browser Ignoring AutoComplete=Off的可能重复
您能说出为什么 autoComplete = "off" 不可靠吗？因为它就像一个魅力。请查看我在这里创建的 React 示例。codesandbox.io/s/72q0z6rp61
@johnsam 因为它适用于少数领域，而不适用于其他领域。适用于 95% 的场景
@ShivaWahi 这很棘手，因为不确定哪种情况不起作用????..如果它是可重现的，那么我们可以帮助你:)
@johnsam 我也很难解释。在少数情况下.. sutocomplete"nope" 在某处工作时工作

标签： reactjs google-chrome autofill

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您可以通过添加 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";
   }

};

这个解决方案对我有用。

让我知道它是否适合你；）

【讨论】：

到目前为止，这是唯一对我有用的解决方案，这实际上是有任何意义的。我尝试了很多其他选择。但它们有时有效，有时无效，而且不可靠，谢谢！

【解决方案5】：

包括new-password 在内的任何东西都对我有用，所以我就是这样做的：

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

【讨论】：

谢谢，这是唯一对我有用的东西。

【解决方案6】：

当使用 jsx - 你必须使用驼峰式属性；所以autoComplete="new-password" 而不是autocomplete。

【讨论】：

【解决方案7】：

唯一对我有用的解决方法：

      onChange={({ target }) => {
          if (target.autocomplete === 'off') {
            setPassword(target.value);
          }
      }}
      onFocus={({ target }) => {
        target.setAttribute('autocomplete', 'off');
      }}

目标只是定义任何属性并检查值是否正确。我选择自动完成只是为了让它更明显。

【讨论】：