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

Question

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

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

我想要达到的目标：

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

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

到目前为止我已经尝试过：

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

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

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

标签： reactjsautocompletematerial-uiautofill

Answer 1

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

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