Question

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

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

我想要实现的目标：

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

Microsoft Edge忽略autoComplete属性。有解决方法，但是他们很笨拙。

因此，Microsoft Edge在label> name上进行正则表达式，以将输入绑定到自动完成功能。因此，您不能使用“标准”标签来做到这一点。

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

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

Answer 3

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

可能的解决方案是在您拥有更多控制权的情况下，使自定义组件不使用Material Ui。可以肯定，通过这种方式，您将能够禁用跨浏览器的自动完成功能。