我的项目在ReactJS和Redux中,我在表单中使用了redux-form。我的网站页面中有两种形式(都有输入类型的文本和密码字段)。现在,chrome会在另一个表单中显示一个表单的自动填充列表,但由于我网站的跳出率增加,它无法正常工作。
我想禁用自动填充和自动完成下拉列表,但没有得到任何解决方案。我的Chrome版本是71.0.3578.98版。
我尝试了以下内容(从其他Stack Overflow链接中读取);但它们都不起作用。
似乎正常工作的唯一方法是使字段只读并在用户开始键入时读取(onKeyDown事件)。然后,如果用户按下退格键并且输入为空,则再次只读,否则再次显示自动填充下拉列表。这个解决方案更像是一个黑客,我想知道更好的解决方案。
PS:这是一个重复的问题,但我没有任何相关的解决方案适用于新版本的Chrome。我遵循的链接:Disabling Chrome Autofill,Chrome ignores autocomplete="off",How to disable Chrome to autofill username/email password?,Disable Google Chrome Autocomplete / Autofill / Suggestion等等。
我一直试图找到一种可靠的方法来完全停止这种方法,而我发现的唯一解决方案就是在身体的顶部放置几个隐藏的区域。
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
Hacky,我知道,但我甚至尝试过Coderer提到的Chrome team response link中给出的确切示例:
例如,如果您的CRM工具中有一个地址输入字段,您不希望Chrome自动填充,您可以赋予其相对于您要求的语义含义:例如:自动完成=“新用户街道地址”。如果Chrome遇到这种情况,则不会尝试自动填充该字段。
......但这不起作用(尽管这篇文章已有多年历史)。
你有没有尝试过this official Chrome team response的建议?
如果您确实要禁用自动填充,我们此时的建议是利用自动完成属性为您的字段提供有效的语义含义。如果我们遇到我们无法识别的自动填充属性,我们将不会尝试填充它。
如果您没有有效的name
属性,这实际上不起作用。所以,你尝试过像<input type="text" name="fieldX" autocomplete="my-site-field-x">
这样的东西吗?用于name
和autocomplete
的值可能很重要,因为我听说有人建议Chrome有时会对规范中公认的值进行模糊匹配(如address
,telephone
,email
等)。
我可以通过在输入之前创建隐藏输入并添加原始输入名称的随机数来禁用Chrome自动填充功能:
<input type="text" name="address" value="" readOnly={true} style={{display: "none"}}/>
<input
ref={inputRef}
className="form-control"
type="text"
name={"address " + Math.random()} <--- add random number to prevent Chrome autofill
required
placeholder="New York"
value={location.address}
onChange={handleInputChange}
/>
我找到了一种方法可以使隐藏输入解决方案工作。我在我的项目中使用它来禁用chrome自动填充我的用户名。
<!-- add a dummy input element and make sure chrome will auto-populate your username(or address etc) to it -->
<input type="text" style="pointer-events: none; opacity: 0; position: absolute">
pointer-events: none; => make it not the target of pointer events
opacity: 0; => make it disappear
position: absolute; => don't let it break your dom structure
适用于Chrome 75.0.3770.100。
希望它可以提供帮助。
这会奏效
<input type="any" readonly onfocus="this.removeAttribute('readonly');">