Chrome、Edge - 禁用表单自动填充/自动完成

Question

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

目标浏览器为Chrome和Microsoft Edge，均为最新版本和两个最新版本（因此共3个版本）。

我想要实现的目标：

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

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

我迄今为止尝试过的方法：

autoComplete={"off"}

autoComplete={"false"}

autoComplete={"xyz"}：使用自定义值的自动完成

autoComplete="new-password"，但在Edge中无效

实现一种解决方案，即在开始时向每个输入字段添加HTML只读属性，焦点聚焦时删除它，并在文本字段失去焦点时重新添加它。这不起作用，而且还导致另一个问题：无法使用键盘上的制表符切换到另一个文本输入。

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

期待看到解决这个问题的方法。

- Gutelaunetyp

---

实际上，在React中，属性名是autoComplete，其中C是大写的。尝试更改属性名。 - angelo

@angelo 谢谢。我知道在ReactJS中这个属性是写作"autoComplete"。 - Gutelaunetyp

@Gutelaunetyp 请提供一个 code sandbox，展示您尝试解决问题1的代码，并重现您遇到的问题。 - Ryan Cogswell

对于 Chrome 浏览器，我必须添加这个 <input autoComplete= "chrome-off" />。 - Doug Hill

只需尝试一下：https://github.com/terrylinooo/disableautofill.js - Terry Lin

Answer 1

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

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

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

虽然此解决方案可以工作，但每次呈现都会创建一个新的Date对象，这并不理想; 但是，Date被使用是因为它确保了到秒的唯一名称。可能有一些包以更高效的方式创建唯一的名称。

- Charles Kornoelje

---

这是我在所有情况下都有效的唯一解决方案。我可以理解浏览器希望让用户更容易填写表单，但实际情况下有些情况我们需要完全禁用这种行为。我发现奇怪的是，使用GUID并不能解决问题。唯一能使其正常工作的是使用日期ISO时间戳（在我的情况下），再加上一些前缀（例如name="off2023-09-02T18:47:25.235Z"）。 - Dylan Vester

Answer 2

您可以在这里详细了解自动完成。问题在于，自动完成是Material Ui属性，而自动完成是本地HTML属性。

可能的解决方案是创建自定义组件，不使用Material Ui，从而获得更多控制权。这样，我相信您一定能够成功禁用跨浏览器自动完成。

- Milan Milicevic

Answer 3

Microsoft Edge忽略了autoComplete属性。虽然有一些解决方法，但它们都是hacky的。

因此，Microsoft Edge对label>name进行了正则表达式匹配，以将输入与自动完成绑定。由于这个原因，您不能使用“标准”标签来实现这一点。

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

至于最后一个问题，那是一个更复杂的解决方案，但使用逻辑可行。您将需要在文本输入字段（TextField）周围创建一个包装器组件。检查该组件何时聚焦，然后删除readOnly prop。

- neon

---

嗨@neon，感謝您的回答。問題不僅僅是自動填充，還包括自動完成。我不想要一個彈出下拉框來為字段建議值。因此清除文本字段不是解決方案。關於解決方案5（添加和刪除readonly屬性）：我已經實現了它，並不太困難。但是它也沒有起作用。而且它摧毀了輸入字段之間的制表符功能。 - Gutelaunetyp