如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
我不得不对那些说要避免禁用自动完成的答案表示异议。
首先要指出的是,未在登录表单字段上显式禁用自动完成是PCI-DSS失败。此外,如果用户的本地计算机受到威胁,则攻击者可以轻松地获取任何自动完成的数据,因为这些数据存储在明文中。
当然,可用性是有争议的,但在哪些表单字段应该禁用自动完成功能,哪些表单字段不应该禁用自动填写功能时,存在一个非常好的平衡。
其他回答
(它在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文档-如何关闭表单自动完成
可以说,我想要一种可以将现场管理完全从浏览器手中拿走的东西。在本例中,有一个标准的文本输入字段来捕获密码-没有电子邮件、用户名等。。。
<input id='input_password' type='text' autocomplete='off' autofocus>
有一个名为“input”的变量,设置为空字符串。。。
var input = "";
jQuery监视字段事件。。。
聚焦时,始终清除字段内容和关联的“输入”变量。在按键时,任何字母数字字符以及一些定义的符号都会附加到“input”变量,并且字段输入会替换为项目符号。此外,当按下Enter键时,键入的字符(存储在“input”变量中)将通过Ajax发送到服务器。(请参阅下面的“服务器详细信息”。)在设置键时,Home、End和Arrow键会刷新“input”变量和字段值。(我可能会对箭头导航和焦点事件产生兴趣,并使用.selectionStart来确定用户单击或正在导航的位置,但不值得为密码字段付出努力。)此外,按下Backspace键会相应地截断变量和字段内容。
$("#input_password").off().on("focus", function(event) {
$(this).val("");
input = "";
}).on("keypress", function(event) {
event.preventDefault();
if (event.key !== "Enter" && event.key.match(/^[0-9a-z!@#\$%&*-_]/)) {
$(this).val( $(this).val() + "•" );
input += event.key;
}
else if (event.key == "Enter") {
var params = {};
params.password = input;
$.post(SERVER_URL, params, function(data, status, ajax) {
location.reload();
});
}
}).on("keyup", function(event) {
var navigationKeys = ["Home", "End", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
if ($.inArray(event.key, navigationKeys) > -1) {
event.preventDefault();
$(this).val("");
input = "";
}
else if (event.key == "Backspace") {
var length = $(this).val().length - 1 > 0 ? $(this).val().length : 0;
input = input.substring(0, length);
}
});
前端摘要
本质上,这使浏览器无法捕获任何有用的内容。即使它覆盖了自动完成设置,和/或显示了一个包含先前输入值的下拉列表,它也只存储字段值的项目符号。
服务器详细信息(可选阅读)
如上所示,一旦服务器返回JSON响应,JavaScript就会执行location.reload()。(此登录技术用于访问受限制的管理工具。与cookie内容相关的一些过度使用可以被跳过,以实现更广泛的实现。)以下是详细信息:
当用户导航到站点时,服务器会查找合法的cookie。如果没有任何cookie,将显示登录页面。当用户输入密码并通过Ajax发送,服务器确认密码并检查以查看用户的IP地址是否在授权IP地址列表中。如果无法识别密码或IP地址,则服务器不会生成cookie,因此当页面重新加载时,用户会看到相同的登录页面。如果密码和IP地址都被识别,服务器将生成cookie具有十分钟的使用寿命,它还存储与时间帧和IP地址相对应的两个加扰值。当页面重新加载时,服务器会找到cookie并验证加扰值是正确的(即时间帧与cookie的日期相对应并且IP地址相同)。每当用户与服务器交互时,无论他们是登录、显示数据还是更新记录,都会重复验证和更新cookie的过程。如果cookie的值始终正确,服务器将显示完整的网站(如果用户正在登录)或满足提交的任何显示或更新请求。如果在任何时候cookie的值不正确,服务器会删除当前cookie,然后在重新加载时,会导致登录页面重新显示。
我必须花了两天的时间来讨论这一问题,然后才能制定自己的解决方案:
首先,如果它适用于任务,则放弃输入并使用文本区域。据我所知,自动填充/自动完成在文本区域没有业务,就我们正在努力实现的目标而言,这是一个很好的开始。现在,您只需更改该元素的一些默认行为,使其充当输入。
接下来,您将希望将任何长条目保持在同一行上,如输入,并希望文本区域与光标一起沿y轴滚动。我们还想去掉调整大小框,因为我们正在尽力模拟输入的行为,而输入没有调整大小句柄。我们通过一些快速CSS实现了所有这些:
#您的文本区域{调整大小:无;overflow-y:隐藏;空白:nowrap;}
最后,您需要确保讨厌的滚动条不会出现,破坏聚会(对于那些特别长的条目),因此确保文本区域不会显示:
#您的文本区域::-webkit滚动条{显示:无;}
轻松点。此解决方案没有自动完成问题。
为了解决这个问题,我使用了一些CSS技巧和以下工作。
input {
text-security:disc;
-webkit-text-security:disc;
-mox-text-security:disc;
}
请阅读本文了解更多详情。
定义输入的属性type=“text”和autocomplete=“off”足以为我关闭自动完成。
除了type=“password”之外,我尝试使用JavaScript钩住别人的建议中的onfocus/onfocuout事件来切换只读属性,效果很好,但当密码字段编辑开始为空时,自动完成密码再次出现。
我建议除了上述工作正常的解决方法之外,还可以使用JavaScript挂钩oninput事件来切换关于密码长度的类型属性。。
<input id="pwd1" type="text" autocomplete="off" oninput="sw(this)" readonly onfocus="a(this)" onfocusout="b(this)" />
<input id="pwd2" type="text" autocomplete="off" oninput="sw(this)" readonly onfocus="a(this)" onfocusout="b(this)" />
和JavaScript。。
function sw(e) {
e.setAttribute('type', (e.value.length > 0) ? 'password' : 'text');
}
function a(e) {
e.removeAttribute('readonly');
}
function b(e) {
e.setAttribute('readonly', 'readonly');
}
推荐文章
- 用背景图像填充SVG路径元素
- 将JSON显示为HTML
- HTML被认为是一种编程语言吗?
- 如何修复favicon.ico错误:“Failed to load resource: net::ERR_EMPTY_RESPONSE”
- 这个CSS是如何产生一个圆的?
- 我如何显示点(“…”)在一个跨度与隐藏溢出?
- 画布在使用CSS时被拉伸,但正常使用“width”/“height”属性
- 如何让一个按钮将我的页面重定向到另一个页面?
- 如何让元素被点击(对于整个文档)?
- Node.js上的html解析器
- 大写还是小写文档类型?
- 样式化HTML电子邮件的最佳实践
- CSS/HTML:什么是使文本斜体的正确方法?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?