如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?


当前回答

(它在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文档-如何关闭表单自动完成

其他回答

这就是:

函数turnOnPasswordStyle(){$('#inputpassword').attr('type',“password”);}<input-onput=“turnOnPasswordStyle()”id=“inputpassword”type=“text”>

这是自2021 5月起适用于所有浏览器的完美解决方案!

TL;博士

将输入字段名和字段ID重命名为非相关的名称,如“data_input_field_1”。然后添加&#8204;将字符插入标签的中间。这是一个非打印字符,因此您不会看到它,但它会诱使浏览器无法识别需要自动完成的字段,因此不会显示内置的自动完成小部件!

详细信息

几乎所有浏览器都使用字段的名称、id、占位符和标签的组合来确定字段是否属于一组地址字段,这些字段可以从自动完成中受益。因此,如果您有一个类似<input type=“text”id=“address”name=“street_address”>的字段,几乎所有浏览器都会将该字段解释为地址字段。因此,浏览器将显示其内置的自动完成小部件。梦想是使用属性autocomplete=“off”可以工作,不幸的是,现在大多数浏览器都不遵守请求。

因此,我们需要使用一些技巧来使浏览器不显示内置的自动完成小部件。我们这样做的方式是欺骗浏览器,使其相信该字段根本不是地址字段。

首先,将id和name属性重命名为不会泄露您正在处理的地址相关数据的属性。因此,与其使用<input type=“text”id=“city input”name=“city”>,不如使用类似的方式。浏览器不知道data_input_field_3代表什么。但你知道。

如果可能,不要使用占位符文本,因为大多数浏览器也会考虑到这一点。如果你必须使用占位符文本,那么你就必须发挥创意,确保你没有使用任何与地址参数本身相关的单词(如City)。使用类似“输入位置”的方法可以实现此目的。

最后一个参数是附加到字段的标签。然而,如果你像我一样,你可能希望保持标签完整,并向用户显示可识别的字段,如“地址”、“城市”、“州”、“国家”。好吧,好消息:你可以!实现这一点的最佳方法是插入零宽度非联接字符&#8204;,作为标签中的第二个字符。因此,将<label>City</label>替换为<label>C&#8204;城市</label>。这是一个非打印字符,因此您的用户将看到City,但浏览器将被欺骗,无法识别该字段!

任务完成!如果一切顺利,浏览器应该不再在这些字段上显示内置的地址自动完成小部件!

正如其他人所说,答案是autocomplete=“off”。

然而,我认为有必要说明为什么在某些情况下使用此选项是一个好主意,因为对此问题和重复问题的一些答案表明,最好不要关闭此选项。

停止存储信用卡号的浏览器不应该留给用户。太多的用户甚至不会意识到这是一个问题。

在信用卡安全码字段上关闭它尤为重要。如本页所述:

“永远不要存储安全码……它的价值取决于这样一种假设,即提供安全码的唯一方法是从实体信用卡中读取安全码,以证明提供该安全码的人实际上持有该卡。”

问题是,如果是公共计算机(网吧、图书馆等),其他用户很容易窃取您的卡信息,甚至在您自己的计算机上,恶意网站也可能窃取自动完成的数据。

您可以在输入中使用它。

例如

<input type=text name="test" autocomplete="off" />

这是浏览器现在忽略的安全问题。浏览器使用输入名称识别和存储内容,即使开发人员认为信息是敏感的,不应存储。

在两个请求之间设置不同的输入名称将解决问题(但仍将保存在浏览器的缓存中,并且还会增加浏览器的缓存)。

要求用户激活或停用浏览器设置中的选项不是一个好的解决方案。该问题可以在后端解决。

这是解决办法。所有自动完成的元素都是使用如下隐藏输入生成的:

<?php $r = md5(rand() . microtime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<?php echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<?php echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

然后,服务器像这样处理后置变量:(Demo)

foreach ($_POST as $key => $val) {
    $newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count);
    if ($count) {
        $_POST[$val] = $_POST[$newKey];
        unset($_POST[$key], $_POST[$newKey]);
    }
}

可以照常访问该值

echo $_POST['username'];

而且浏览器将无法从以前的请求或以前的用户那里建议信息。

即使浏览器更新其技术以忽略/尊重自动完成属性,这将继续有效。