Chrome，边缘 - 禁用字段的自动填充/自动完成

Question

我有一个使用 Material UI.

构建的 ReactJS 应用程序

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

我想达到的目标：

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

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

到目前为止我尝试过的：

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

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

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

Answer 1

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

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

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

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

Answer 2

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

可能的解决方案是让自定义组件不使用 Material Ui，这样您可以更好地控制。这样，我敢肯定，您将设法禁用跨浏览器自动完成功能。

Answer 3

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

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

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

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

Chrome, Edge - Disable autofill / autocomplete for fields