通过CSS禁用自动完成功能


94

是否可以使用CSS禁用表单元素(特别是文本字段)上的自动完成功能?

我使用的标签库不允许使用autocomplete元素,并且我想在不使用Javascript的情况下禁用autocomplete。

Answers:


52

您可以使用一次生成的idname每次的,这是不同的,因此浏览器无法记住该文本字段,因此将无法建议某些值。

至少这是跨浏览器安全的替代方法,但是我建议使用RobertsonM(autocomplete="off")的答案。


4
这样做的副作用是,浏览器的历史记录会被许多不同的(随机)表单字段弄乱。在浏览器本地数据库中对已知值的每次查找都将花费一些时间。
皮肤癣2011年

4
这是个好主意,但不会阻止将信用卡号保存到未加密的自动完成数据库中。
汉斯·彼得·斯托尔2012年

如果您不使用静态控件名称/ ID,那么任何脚本都会被破坏,任何表单数据集合也会被破坏(除非您的应用程序的每个方面都知道新的命名约定,并且还将动态更新任何脚本/数据集合)。
Gary Richter

我必须避免自动完成,将字段名称“随机化”是唯一可行的方法。autocomplete="off"在Browser X版本(当前+ 1)中,将使用诸如此类的任何提示。(例如,最新的Google Chrome浏览器忽略autocomplete = off。)
Mikko Rantalainen

@kmoser:即使您通过随机化元素破坏了浏览器的自动完成功能,id它仍然会将其保存在缓存中(即,存储在用户的硬盘上)。对某人的信用卡号或任何其他敏感信息而言,这是一件可怕的事情。此外,它不必要地使用户的磁盘驱动器混乱。每次他们访问您的页面时,新的(类似Cookie的)文件都会保存在他们的计算机上。只是想尝试一下,尝试清除您的Chrome缓存,看看它将释放多少空间(如果您有一段时间没有这样做了)。这就是为什么我称其为可怕的想法。
c00000fd

129

就目前而言,CSS中没有“自动完成关闭”属性。但是,html为此提供了一个简单的代码:

<input type="text" id="foo" value="bar" autocomplete="off" />

如果您正在寻找一个站点范围的效应器,那么一个简单的方法就是简单地让js函数运行所有'input'并添加此标签,或者寻找相应的CSS类/ id。

autocomplete属性在Chrome和Firefox(!)中可以正常工作,但另请参阅是否有W3C有效的方法来禁用HTML表单中的自动完成功能?


4
developer.mozilla.org/en-US/docs/Web/Security/…建议autocomplete="anyrandominvalidvalue"会起作用。
Andrew Stalker

49

您可以通过jQuery轻松实现

$('input').attr('autocomplete','off');

4
在大多数情况下,$('form')。attr('autocomplete','off'); 效率更高(请参阅下面的答案评论)
irakli 2014年

@irakli就我而言,使用form是唯一有效的方法。不input。谢谢。
khaverim 2014年

1
嗨,2018年,这几乎是我现在可以使用它的唯一方法。另外,@ irakli如果您需要在整个表单上使用表单作为选择器,那么这是正确的。
德文·基斯

15

如果您使用的是form,则可以使用禁用所有自动完成功能,

<form id="Form1" runat="server" autocomplete="off">

实际上,按照Mozilla:“如果未在输入元素上指定autocomplete属性,则浏览器将使用<input>元素的表单所有者的autocomplete属性值。表单所有者是该<input>元素所属于的form元素ID由输入元素的form属性指定的form元素的后代或form元素。有关更多信息,请参见<form>中的autocomplete属性。” 考虑到这,一个比上面显示的更有效的jQuery替代方案是:$('form')。attr('autocomplete','off');
irakli 2014年

13

CSS没有此功能。您将需要使用客户端脚本。


1
知道如何在边缘禁用此功能吗?无论我们做什么,我们都会看到它。
本杰明·格林鲍姆

@BenjaminGruenbaum使用autocomplete="false"将在Edge中工作。从技术上讲,任何无效值都可以代替“ false”。
安德鲁

4

我尝试了从问题解答和网络上其他文章中提出的所有建议方法,但无论如何都无法正常工作。我在表单元素中尝试了autocomplete =“ new-random-value”,autocomplete =“ off”,使用如下客户端脚本,但在$(document).ready()之外,提到了其中一个用户:

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

我发现浏览器中的另一个优先级可能导致这种奇怪的行为!因此,我进行了更多搜索,最后,我仔细阅读了这篇好文章中的以下内容

因此,许多现代浏览器不支持对登录字段使用autocomplete =“ off”:

如果网站为设置了autocomplete =“ off”,并且该表单包含用户名和密码输入字段,则浏览器仍会记住该登录信息;如果用户同意,浏览器将在下次用户时自动填充这些字段。访问页面。如果站点为用户名和密码字段设置了autocomplete =“ off”,那么浏览器仍会记住该登录信息,如果用户同意,则下次用户访问该页面时,浏览器将自动填充这些字段。这是Firefox(自版本38),Google Chrome(自版本34)和Internet Explorer(自版本11)开始的行为。

如果要定义用户管理页面,用户可以在其中为其他人指定新密码,因此要防止自动填写密码字段,则可以使用 autocomplete =“ new-password” ; 但是,尚未在Firefox上实现对此值的支持。

它只是工作。我专门尝试了chrome,希望它能继续起作用并为他人提供帮助。


1

我通过为所有输入添加伪造的自动完成名称解决了该问题。

$("input").attr("autocomplete", "fake-name-disable-autofill");

0

感谢@ahhmarr的解决方案,我能够在Angular + ui-router环境中解决相同的问题,我将在这里与有兴趣的人分享。

在我的代码中,index.html我添加了以下脚本:

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

然后,为了涵盖状态更改,我在根控制器中添加了以下内容:

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

超时用于html在应用jquery之前呈现。

如果您找到更好的解决方案,请告诉我。


0

您不能使用CSS禁用自动完成功能,但可以使用HTML:

<input type="text" autocomplete="false" />

从技术上讲,您可以替换false为任何无效的值,它将起作用。这是我找到的唯一适用于Edge的iOS解决方案。


0

有3种方式,我以更好的方式提及它们...

1-HTML方式:

<input type="text" autocomplete="false" />

2-Javascript方式:

document.getElementById("input-id").getAttribute("autocomplete") = "off";

3-jQuery方式:

$('input').attr('autocomplete','off');

0

我只是用'new-password',而不是'off'上自动完成。

并且我也尝试使用此代码并且可以正常工作(至少在我看来是这样),我使用WP和GravityForm作为您的信息

$('input').attr('autocomplete','new-password');

-5
$('input').attr('autocomplete','off');

3
这不能为所提问题提供答案。OP专门要求一种CSS解决方案,而且,它与已经存在的答案完全相同。
Holger 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.