如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
由于自动完成的行为在不同的浏览器和版本中几乎是不可预测的,所以我的方法是不同的。指定要禁用只读属性自动填充的所有输入元素,并仅在聚焦时禁用它。
document.addEventListener('click', (e) => {
readOnlys.forEach(readOnly => {
if (e.target == readOnly) {
readOnly.removeAttribute('readonly', '');
readOnly.style.setProperty('pointer-events', 'none');
} else {
readOnly.setAttribute('readonly', '');
readOnly.style.setProperty('pointer-events', 'auto');
}
});
});
document.addEventListener('keyup', (e) => {
if (e.key == 'Tab') {
readOnlys.forEach(readOnly => {
if (e.target == readOnly) {
readOnly.removeAttribute('readonly', '');
readOnly.style.setProperty('pointer-events', 'none');
} else {
readOnly.setAttribute('readonly', '');
readOnly.style.setProperty('pointer-events', 'auto');
}
});
}
});
如果您想确保用户在禁用JS的情况下仍然可以访问字段,那么可以在页面加载时通过JS设置所有只读。您仍然可以使用autocomplete属性作为回退。
其他回答
这对我来说就像一种魅力。
将表单的自动完成属性设置为关闭添加虚拟输入字段,并将其属性设置为禁用。
<form autocomplete=“off”><input-type=“text”autocomplete=“off”style=“display:none”></form>
我必须花了两天的时间来讨论这一问题,然后才能制定自己的解决方案:
首先,如果它适用于任务,则放弃输入并使用文本区域。据我所知,自动填充/自动完成在文本区域没有业务,就我们正在努力实现的目标而言,这是一个很好的开始。现在,您只需更改该元素的一些默认行为,使其充当输入。
接下来,您将希望将任何长条目保持在同一行上,如输入,并希望文本区域与光标一起沿y轴滚动。我们还想去掉调整大小框,因为我们正在尽力模拟输入的行为,而输入没有调整大小句柄。我们通过一些快速CSS实现了所有这些:
#您的文本区域{调整大小:无;overflow-y:隐藏;空白:nowrap;}
最后,您需要确保讨厌的滚动条不会出现,破坏聚会(对于那些特别长的条目),因此确保文本区域不会显示:
#您的文本区域::-webkit滚动条{显示:无;}
轻松点。此解决方案没有自动完成问题。
我遇到了同样的问题,今天2019年10月9日,我找到的唯一解决方案是
将autocomplete=“off”添加到表单标记中。
打开表单标签后输入1个错误。
<input id="username" style="display:none" type="text" name="fakeusernameremembered">
但它在密码类型字段上不起作用,请尝试
<input type="text" oninput="turnOnPasswordStyle()" placeholder="Enter Password" name="password" id="password" required>
在脚本上
function turnOnPasswordStyle() {
$('#password').attr('type', "password");
}
这在Chrome-78、IE-44、Firefox-69上进行了测试
2022年9月
一些浏览器,如Google Chrome,甚至不关心autocomplete属性的值。停止获取建议的最佳方法是将输入的name属性更改为随时间变化的属性
截至2022年9月,浏览器将不提供一次性密码自动完成功能
所以我们可以使用otp作为域名。
<input name=“otp”>
如果您想阻止通用浏览器插件LastPass自动填充字段,可以将属性数据lpignore=“true”添加到此线程的其他建议中。请注意,这不仅适用于密码字段。
<input type="text" autocomplete="false" data-lpignore="true" />
前一段时间我也在尝试做同样的事情,但被难住了,因为我发现的所有建议都不适合我。结果是LastPass。
推荐文章
- 编辑和重放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的替代方案