Chrome，Edge - 禁用字段的自动填充/自动完成答案

【问题标题】：Chrome, Edge - Disable autofill / autocomplete for fieldsChrome，Edge - 禁用字段的自动填充/自动完成
【发布时间】：2021-02-18 00:22:05
【问题描述】：

我有一个使用 Material UI 构建的 ReactJS 应用。

目标浏览器是 Chrome 和 Microsoft Edge，都是最新版本和两个最新版本（总共 3 个版本）。

我想要达到的目标：

禁用文本输入字段的自动完成和自动填充。

我找了很长时间，但找不到可行的解决方案。

到目前为止我所尝试的：

autoComplete={"off"}
autoComplete={"false"}
autoComplete={"xyz"} 所以使用自定义值自动完成
autoComplete="new-password"> 但它在 Edge 中不起作用
解决方案的实施，在开始时为每个输入字段添加 HTML 只读属性，在焦点上将其移除，然后在 texfield 的 onBlur 上再次添加它。这不起作用，而且会导致无法再使用键盘上的制表符移动到另一个文本输入的缺陷。

将每个字段包装在 <form> 元素中对我来说不是解决方案。

很高兴看到解决此问题的方法。

【问题讨论】：

【解决方案1】：

Microsoft Edge 忽略 autoComplete 属性。有一些变通方法，但它们很老套。

因此，Microsoft Edge 在标签 > 名称上执行正则表达式以将输入绑定到自动完成。因此，您不能使用“标准”标签来执行此操作。

在不知道它匹配的所有模式的情况下，我会说最简单的解决方案是在它自动填充后将其清除。如果您确实知道模式，您可以避免它并创建一个自定义 TextField 以避免使 Edge 自动完成的情况。

至于最后一个项目符号，这是一个更复杂的解决方案，但在逻辑上是可行的。您必须在文本输入字段 (TextField) 周围创建一个包装组件。这会检查组件何时获得焦点，然后删除 readOnly 属性。

【讨论】：

嗨@neon，感谢您的回答。问题不仅在于自动填充，还在于自动完成。我不希望有一个弹出下拉菜单建议该字段的值。因此，清除文本字段不是解决方案。关于解决方案5（添加和删除只读属性）：我已经实现了它，它并不难。但它都不起作用。此外，它破坏了输入字段之间的制表功能。

【解决方案2】：

您可以阅读有关自动完成功能的更多详细信息 here。问题是 autoComplete 是 Material Ui 属性，而 autocomplete 是原生 html 属性。

可能的解决方案是在您拥有更多控制权的情况下制作不使用 Material Ui 的自定义组件。这样，我敢肯定，您将设法禁用跨浏览器自动完成功能。

【讨论】：

【解决方案3】：

一种可能的解决方案是为每次呈现<TextField> 设置一个唯一的名称属性。例如：

<TextField
  {...textFieldProps}
  label={label}
  name={`${label}${Date()}`}
/>

您所引用的自动填充和自动完成行为是现代浏览器试图变得“智能”并记住用户过去的输入以节省他们的时间。您可能在浏览网页时注意到了这种行为，其中一个文本输入“记住”了您从不同站点的输入。发生这种情况时，这是因为两个元素的 name 属性值相同。在您的情况下，不需要这种“记忆”行为。

虽然此解决方案有效，但每次渲染都会创建一个新的Date 对象，这并不理想；但是，使用Date 是因为它确保了一个唯一的名称，直到第二个。可能有一些包以更高效的方式创建唯一名称。

【讨论】：