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

Question

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

目标浏览器是 Chrome 和 Microsoft Edge，都是最新版本和两个最新版本(所以总共有 3 个版本)。

我想要实现的目标:

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

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

到目前为止我尝试了什么:

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

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

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

Answer 1

一个可能的解决方案是为每次 <TextField> 设置一个唯一的名称属性被渲染。例如:

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

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

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