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


当前回答

如果您想阻止通用浏览器插件LastPass自动填充字段,可以将属性数据lpignore=“true”添加到此线程的其他建议中。请注意,这不仅适用于密码字段。

<input type="text" autocomplete="false" data-lpignore="true" />

前一段时间我也在尝试做同样的事情,但被难住了,因为我发现的所有建议都不适合我。结果是LastPass。

其他回答

大多数主要浏览器和密码管理器(正确地说,IMHO)现在都忽略了autocomplete=off。

为什么?许多银行和其他“高安全性”网站“出于安全目的”在其登录页面中添加了autocomplete=off,但这实际上降低了安全性,因为这会导致人们更改这些高安全性网站上的密码,以便于记忆(从而破解),因为自动完成功能已被破坏。

很久以前,大多数密码管理器开始忽略autocomplete=off,现在浏览器开始只对用户名/密码输入执行相同的操作。

不幸的是,自动完成实现中的错误会将用户名和/或密码信息插入到不适当的表单字段中,从而导致表单验证错误,或者更糟的是,意外地将用户名插入到用户故意留空的字段中。

web开发人员应该做什么?

如果您可以单独保存页面上的所有密码字段,这是一个很好的开始,因为密码字段的存在似乎是用户/密码自动完成的主要触发因素。否则,请阅读下面的提示。Safari注意到有两个密码字段,并在这种情况下禁用自动完成,假设它必须是一个更改密码表单,而不是登录表单。因此,请确保在允许的任何表单中使用两个密码域(新的和确认新的)不幸的是,Chrome34每当看到密码字段时,都会尝试使用user/pass自动填充字段。这是一个非常糟糕的bug,希望他们会改变Safari的行为。但是,将其添加到表单顶部似乎会禁用密码自动填充:<input-type=“text”style=“display:none”><input-type=“password”style=“display:none”>

我还没有彻底调查IE或Firefox,但如果其他人在评论中有信息,我很乐意更新答案。

我已经在这场永无止境的战斗中战斗了很久。。。所有的技巧和黑客最终都会停止工作,就像浏览器开发人员正在阅读这个问题一样。

我不想随机化域名,不想修改服务器端代码,不想使用JS重磅技巧,也不想将“黑客攻击”降至最低。下面是我想到的:

TL;DR使用完全没有名称或id的输入!并跟踪隐藏字段中的更改

<!-- input without the "name" or "id" -->
<input type="text" oninput="this.nextElementSibling.value=this.value">
<input type="hidden" name="email" id="email">

显然,可以在所有主要浏览器中使用。

P.S.已知的小问题:

您不能再通过id或名称引用此字段。但您可以使用CSS类。或者使用$(#email').prev();在jQuery中。或者想出另一个解决方案(有很多)。当以编程方式更改文本框值时,oninput和onchange事件不会触发。因此,相应地修改代码以反映隐藏字段中的更改。

为了解决这个问题,我使用了一些CSS技巧和以下工作。

input {
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

请阅读本文了解更多详情。

Google Chrome忽略某些输入的autocomplete=“off”属性,包括密码输入和按名称检测的常见输入。

例如,如果您输入的是姓名地址,那么Chrome将根据其他网站上输入的地址提供自动填充建议,即使您告诉它不要这样做:

<input type="string" name="address" autocomplete="off">

如果您不希望Chrome这样做,那么可以重命名或命名表单字段的名称:

<input type="string" name="mysite_addr" autocomplete="off">

如果您不介意以前在站点上输入的自动完成值,那么可以保持启用自动完成。域名的名称间距应足以防止从其他站点记住的值出现。

<input type="string" name="mysite_addr" autocomplete="on">

我必须花了两天的时间来讨论这一问题,然后才能制定自己的解决方案:

首先,如果它适用于任务,则放弃输入并使用文本区域。据我所知,自动填充/自动完成在文本区域没有业务,就我们正在努力实现的目标而言,这是一个很好的开始。现在,您只需更改该元素的一些默认行为,使其充当输入。

接下来,您将希望将任何长条目保持在同一行上,如输入,并希望文本区域与光标一起沿y轴滚动。我们还想去掉调整大小框,因为我们正在尽力模拟输入的行为,而输入没有调整大小句柄。我们通过一些快速CSS实现了所有这些:

#您的文本区域{调整大小:无;overflow-y:隐藏;空白:nowrap;}

最后,您需要确保讨厌的滚动条不会出现,破坏聚会(对于那些特别长的条目),因此确保文本区域不会显示:

#您的文本区域::-webkit滚动条{显示:无;}

轻松点。此解决方案没有自动完成问题。