如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
2022年9月
一些浏览器,如Google Chrome,甚至不关心autocomplete属性的值。停止获取建议的最佳方法是将输入的name属性更改为随时间变化的属性
截至2022年9月,浏览器将不提供一次性密码自动完成功能
所以我们可以使用otp作为域名。
<input name=“otp”>
其他回答
我不得不对那些说要避免禁用自动完成的答案表示异议。
首先要指出的是,未在登录表单字段上显式禁用自动完成是PCI-DSS失败。此外,如果用户的本地计算机受到威胁,则攻击者可以轻松地获取任何自动完成的数据,因为这些数据存储在明文中。
当然,可用性是有争议的,但在哪些表单字段应该禁用自动完成功能,哪些表单字段不应该禁用自动填写功能时,存在一个非常好的平衡。
浏览器忽略只读字段上的自动删除。这段代码使所有可写字段在聚焦之前都是只读的。
$(_=>{$('form[autocomplete=off][name]:not([readonly])').map((i,t)=>$(t).prop('autocomplete',t.type=='密码'?'新密码':'ope').prop;})<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><form method=“post”autocomplete=“off”><input name=“user”id=“user”required class=“表单控件”/><label class=“form label”for=“user”>新用户</label><小时><input type=“password”name=“pass”id=“pass“minlength=”8“maxlength=“20”/><label class=“form label”for=“pass”>新Passwort</label></form>
我刚刚遇到了这个问题,并尝试了几次失败,但这一次对我有效(在MDN上找到):
在某些情况下,浏览器将继续建议自动完成值即使autocomplete属性设置为off。这是意外的对于开发人员来说,这种行为可能非常令人困惑。真正的诀窍强制无完成是将随机字符串分配给属性像这样:
autocomplete="nope"
除了
autocomplete="off"
使用
readonly onfocus="this.removeAttribute('readonly');"
对于不希望他们记住表单数据(用户名、密码等)的输入,如下所示:
<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
这适用于Chrome 84.0.4147.105
1.为密码字段分配文本类型并添加类,例如“fakepasswordtype”
<input type="text" class="fakepasswordtype" name="password1">
<input type="text" class="fakepasswordtype" name="password2">
2.然后在第一次输入完成时,使用jQuery将类型改回密码
jQuery(document).ready(function($) {
$('.fakepasswordtype').on('input', function(e){
$(this).prop('type', 'password');
});
});
这阻止了Chrome在自动填充方面的丑陋行为。
推荐文章
- 编辑和重放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的替代方案