问题描述
目标浏览器是Chrome和Microsoft Edge,均为最新版本和两个最新版本(因此共有3个版本)。
我想要实现的目标:
到目前为止,我已经尝试过:
- autoComplete = {“ off”}
- autoComplete = {“ false”}
- autoComplete = {“ xyz”},以便使用自定义值自动完成
- autoComplete =“ new-password”>,但在Edge中不起作用
- 解决方案的实现,该解决方案在开始时将HTML只读属性添加到每个输入字段,将其移到焦点上,然后再次在texfield的onBlur上添加。这是行不通的,而且还会导致一个缺陷,即无法再使用键盘上的制表符移动到另一个文本输入。
对我来说,将每个字段都包装在<form>
元素中对我来说是解决之道。
解决方法
一种可能的解决方案是每次呈现<TextField>
时都设置一个唯一的name属性。例如:
<TextField
{...textFieldProps}
label={label}
name={`${label}${Date()}`}
/>
您要引用的自动填充和自动完成行为是现代的浏览器,它们试图“智能”并记住用户过去的输入以节省时间。您可能会在浏览网页时注意到这种行为,其中一个文本输入“记住”了来自其他站点的输入。发生这种情况时,是因为两个元素的name属性具有相同的值。就您而言,这种“记忆”行为是不希望的。
尽管此解决方案有效,但在每个渲染上都会创建一个新的Date
对象,这并不理想;但是,使用Date
是因为它可以确保唯一的名称,直到第二个。可能有一些软件包可以以更高性能的方式创建唯一名称。
Microsoft Edge忽略autoComplete属性。有解决方法,但是他们很笨拙。
因此,Microsoft Edge在label> name上进行正则表达式,以将输入绑定到自动完成功能。因此,您不能使用“标准”标签来做到这一点。
在不知道其匹配的所有模式的情况下,我想说最简单的解决方案是在自动填充后清除它。如果您确实知道这些模式,则可以避免使用它,并创建一个自定义TextField以避免使Edge自动完成的情况。
至于最后一个项目符号,这是一个更复杂的解决方案,但在逻辑上可行。您将必须在文本输入字段(TextField)周围创建包装器组件。这将检查组件何时聚焦,然后删除readOnly属性。
,您可以阅读有关自动完成here的更多详细信息。问题在于autoComplete是Material Ui属性,而autocomplete是本机html属性。
可能的解决方案是在您拥有更多控制权的情况下,使自定义组件不使用Material Ui。可以肯定,通过这种方式,您将能够禁用跨浏览器的自动完成功能。