如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
我通过添加两个假输入并赋予它们绝对位置来阻止Chrome 66自动填充:
<form style="position: relative">
<div style="position: absolute; top: -999px; left: -999px;">
<input name="username" type="text" />
<input name="password" type="password" />
</div>
<input name="username" type="text" />
<input name="password" type="password" />
起初,我尝试添加display:none;但Chrome忽略了这些输入,并自动填充可见的输入。
其他回答
始终有效的解决方案
我用随机字符解决了与谷歌Chrome的无休止斗争。当您总是使用随机字符串呈现自动完成时,它将永远不会记住任何内容。
<input name="name" type="text" autocomplete="rutjfkde">
希望这对其他人有所帮助。
2022年更新:
Chrome做出了这一改进:autocomplete=“新密码”,这将解决这个问题,但我不确定,如果一段时间后Chrome再次将其更改为不同的功能。
Chrome一直试图强制自动完成。所以你需要做一些事情。
输入字段的属性id和名称不需要是可识别的。所以没有姓名、电话、地址等值。
相邻的标签或div也需要不可识别。然而,您可能会想,用户如何知道?好吧,在使用内容后,您可以使用::做一个有趣的小技巧。你可以将其设置为字母。
<label>Ph<span class='o'></span>ne</label>
<input id='phnbr' name='phnbr' type='text'>
<style>
span.o {
content: 'o';
}
</style>
不幸的是,大多数浏览器都删除了此选项,因此无法禁用密码提示。
直到今天,我还没有找到解决这个问题的好办法。我们现在剩下的是希望有一天这种选择会回来。
我尝试了几乎所有的答案,但新版本的Chrome很聪明;如果你写
autocomplete="randomstring" or autocomplete="rutjfkde"
它会自动将其转换为
autocomplete="off"
当输入控件接收到焦点时。
所以,我使用jQuery完成了这项工作,我的解决方案如下。
$("input[type=text], input[type=number], input[type=email], input[type=password]").focus(function (e) {
$(this).attr("autocomplete", "new-password");
})
这是最简单的,对于表单上的任何数量的控件都可以做到。
我真不敢相信,这件事被报道了这么久,仍然是一个问题。以前的解决方案对我来说不起作用,因为Safari似乎知道元素何时不显示或不在屏幕上,但下面的解决方案确实对我起作用:
<div style="height:0px; overflow:hidden; ">
Username <input type="text" name="fake_safari_username" >
Password <input type="password" name="fake_safari_password">
</div>
推荐文章
- 编辑和重放XHR chrome/firefox等?
- 使用JavaScript显示/隐藏'div'
- 如何用CSS“裁剪”一个矩形图像成一个正方形?
- 使用JavaScript获取所选的选项文本
- AngularJS模板中的三元运算符
- HTML编码问题-显示“”字符而不是“ ”
- 嵌入YouTube视频-拒绝在帧中显示,因为它将“X-Frame-Options”设置为“SAMEORIGIN”
- 添加HTML到容器元素中,不包含innerHTML
- 如何使用jQuery添加' style=display:"block" '到一个元素?
- 在HTML中,我可以用✓做一个复选标记;. 有相应的x标记吗?
- 我可以将CSS样式应用于元素名称吗?
- 我怎么能发送一个内部<div>到它的父<div>底部?
- 改变引导输入焦点蓝色发光
- 我如何使一个div上的滚动条只在必要时可见?
- HTML5 iFrames的替代方案