如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
为了解决这个问题,我使用了一些CSS技巧和以下工作。
input {
text-security:disc;
-webkit-text-security:disc;
-mox-text-security:disc;
}
请阅读本文了解更多详情。
其他回答
简易黑客
使输入为只读
<input type="text" name="name" readonly="readonly">
超时后删除只读
$(function() {
setTimeout(function() {
$('input[name="name"]').prop('readonly', false);
}, 50);
});
我已经在这里发布了一个解决方案:禁用Chrome自动填充信用卡
解决方法是将自动完成属性设置为“cc csc”,该属性的值是信用卡的csc,并且不允许他们存储它!(目前…)
autocomplete="cc-csc"
(它在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");
})
这是最简单的,对于表单上的任何数量的控件都可以做到。
<input type="text" name="attendees" id="autocomplete-custom-append">
<script>
/* AUTOCOMPLETE */
function init_autocomplete() {
if (typeof ($.fn.autocomplete) === 'undefined') {
return;
}
// console.log('init_autocomplete');
var attendees = {
1: "Shedrack Godson",
2: "Hellen Thobias Mgeni",
3: "Gerald Sanga",
4: "Tabitha Godson",
5: "Neema Oscar Mracha"
};
var countriesArray = $.map(countries, function (value, key) {
return {
value: value,
data: key
};
});
// initialize autocomplete with custom appendTo
$('#autocomplete-custom-append').autocomplete({
lookup: countriesArray
});
};
</script>
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击