如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
(它在2021适用于Chrome(v88、89、90)、Firefox、Brave和Safari。)这里已经写过的旧答案将经过反复尝试,但大多数他们没有链接到任何官方文档或Chrome对此的评论课题
问题中提到的问题是因为Chrome的自动填充功能,这是Chrome在这个bug链接中的立场-问题468153:autocomplete=off在非登录INPUT元素上被忽略,注释160
简单地说,有两种情况-
[案例1]:您的输入类型不是密码。在这种情况下,解决方案很简单,有三个步骤。将name属性添加到输入name不应以电子邮件或用户名之类的值开头。否则Chrome仍然会显示下拉列表。例如,name=“emailToDelete”显示下拉列表,但name=“to delete email”不显示。这同样适用于autocomplete属性。添加autocomplete属性,并添加一个对您有意义的值,如新字段名
它将看起来像这样,并且在您的余生中不会再次看到该输入的自动填充-
<input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
[案例2]:输入类型为密码好吧,在这种情况下,无论您的试用如何,Chrome都会向您显示管理密码/使用现有密码的下拉列表。Firefox也会做一些类似的事情,其他所有主要浏览器也是如此。2.在这种情况下,如果你真的想阻止用户看到下拉列表来管理密码/看到安全生成的密码,你就必须使用JS来切换输入类型,正如这个问题的其他答案中提到的那样。
2有关关闭自动完成的详细MDN文档-如何关闭表单自动完成
其他回答
我尝试了几乎所有的答案,但新版本的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");
})
这是最简单的,对于表单上的任何数量的控件都可以做到。
Firefox 30忽略密码的autocomplete=“off”,而是选择提示用户密码是否应存储在客户端上。请注意2014年5月5日的以下评论:
密码管理器始终提示是否要保存密码。未经用户许可,密码不会保存。我们是继IE和Chrome之后第三个实现这一改变的浏览器。
根据Mozilla开发者网络文档,布尔表单元素属性autocomplete防止表单数据在旧浏览器中缓存。
<input type="text" name="foo" autocomplete="off" />
没有虚假输入,没有javascript!
无法在浏览器之间一致禁用自动填充。我尝试了所有不同的建议,但没有一个在所有浏览器中都有效。唯一的方法是根本不使用密码输入。下面是我想到的:
<style type="text/css">
@font-face {
font-family: 'PasswordDots';
src: url('text-security-disc.woff') format('woff');
font-weight: normal;
font-style: normal;
}
input.password {
font-family: 'PasswordDots' !important;
font-size: 8px !important;
}
</style>
<input class="password" type="text" spellcheck="false" />
下载:text-security-disc.woff
以下是我的最终结果:
负面的副作用是,可以从输入中复制纯文本,但使用一些JS应该可以防止这种情况。
添加autocomplete=“off”不会使其停止。
将输入类型属性更改为type=“search”。谷歌不会对搜索类型的输入应用自动填充。
固定的只需在实际输入字段上方添加
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion-MDNhttps://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908-中等在EDGE、Chrome(最新版本63)、Firefox Quantum(57.0.4 64-бит)、Firefox(52.2.0)上测试假字段是chrome/opera自动填充错误字段的一种解决方法
const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}
<input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />
<TextField
name='userName'
autoComplete='nope'
...
/>
<TextField
name='password'
autoComplete='new-password'
...
/>
推荐文章
- 编辑和重放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的替代方案