如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
有很多答案,但大多数都是破解或某种变通方法。
这里有三个案例。
案例一:如果这是你的标准登录表单。无论如何关闭它都可能是不好的。如果你真的需要这样做,请仔细考虑。用户习惯于浏览器记住和存储密码。在大多数情况下,你不应该改变这种标准行为。
如果你仍然想这样做,请参阅案例三
案例二:如果这不是您的常规登录表单,但输入的名称或id属性不是“像”电子邮件、登录名、用户名、用户名和密码。
Use
<input type="text" name="yoda" autocomplete="off">
案例三:如果这不是您的常规登录表单,但输入的名称或id属性是“类似”电子邮件、登录名、用户名、用户名和密码。
例如:登录,abc_login,密码,some_password,password_field。
所有浏览器都带有密码管理功能,可以记住密码或建议使用更强的密码。他们就是这样做的。
然而,假设你是一个网站的管理员,可以创建用户并设置他们的密码。在这种情况下,您不希望浏览器提供这些功能。
在这种情况下,autocomplete=“off”将不起作用。使用autocomplete=“新密码”
<input type="text" name="yoda" autocomplete="new-password">
有用链接:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
其他回答
我尝试了几乎所有的答案,但新版本的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");
})
这是最简单的,对于表单上的任何数量的控件都可以做到。
<form name="form1" id="form1" method="post"
autocomplete="off" action="http://www.example.com/form.cgi">
这将在Internet Explorer和Mozilla Firefox中运行。缺点是它不是XHTML标准。
为字段使用非标准的名称和id,因此“name”不是“name_”。浏览器将不会将其视为名称字段。
最好的一点是,您可以对某些但不是所有字段执行此操作,并且它将自动完成某些但不是全部字段。
用只读存储器贴出的答案很聪明,很管用。
但当我使用Bootstrap时,只读输入字段被标记为灰色背景,直到被聚焦。当文档加载时,您可以通过简单地锁定和解锁输入来欺骗浏览器。
因此,我有一个想法将其实现到jQuery解决方案中:
jQuery(document).ready(function () {
$("input").attr('readonly', true);
$("input").removeAttr('readonly');
});
我的解决方案是使用angular js指令动态更改文本输入类型它就像魅力一样
首先添加2个隐藏文本字段
然后添加一个像这样的角度指令
(function () {
'use strict';
appname.directive('changePasswordType', directive);
directive.$inject = ['$timeout', '$rootScope', '$cookies'];
function directive($timeout, $rootScope, $cookies) {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope,element) {
var process = function () {
var elem =element[0];
elem.value.length > 0 ? element[0].setAttribute("type", "password") :
element[0].setAttribute("type", "text");
}
element.bind('input', function () {
process();
});
element.bind('keyup', function () {
process();
});
}
}
})()
然后在需要阻止自动完成的文本字段中使用它
<input type="text" style="display:none">\\can avoid this 2 lines
<input type="password" style="display:none">
<input type="text" autocomplete="new-password" change-password-type>
注意:不要忘记包含jquery,并在开始时设置type=“text”
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击