如何在Web表单字段/输入标记上禁用浏览器自动完成？

Question

如何autocomplete在主要浏览器中禁用特定input(或form field)？

Answer 1

Firefox 30忽略autocomplete="off"密码,选择提示用户而不是密码是否应存储在客户端上.请注意2014年5月5日的以下评论:

• 密码管理器始终提示是否要保存密码.未经用户许可,不会保存密码.
• 在IE和Chrome之后,我们是第三个实现此更改的浏览器.

根据Mozilla开发人员文档,表单元素属性autocomplete可防止表单数据在旧版浏览器中缓存.

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

Answer 2

除此之外autocomplete=off,您还可以通过生成页面的代码随机化您的表单字段名称,也许可以通过在名称末尾添加一些特定于会话的字符串.

提交表单后,您可以在服务器端处理它之前删除该部分.这将阻止Web浏览器查找您的字段的上下文,也可能有助于防止XSRF攻击,因为攻击者无法猜测表单提交的字段名称.

Answer 3

大多数主流浏览器和密码管理器(正确地,恕我直言)现在都忽略了autocomplete=off.

为什么？许多银行和其他"高安全性"网站autocomplete=off"出于安全目的" 添加到他们的登录页面,但这实际上降低了安全性,因为它导致人们更改这些高安全性站点上的密码,因为自动完成后很容易记住(并因此破解)坏了.

很久以前,大多数密码管理autocomplete=off器都开始忽略,现在浏览器开始只对用户名/密码输入做同样的事情.

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

什么是Web开发人员？

• 如果您可以自己保留页面上的所有密码字段,那么这是一个很好的开始,因为密码字段的存在似乎是用户/通行证自动完成启动的主要触发器.否则,请阅读以下提示.
• Safari注意到在这种情况下有2个密码字段并禁用自动完成,假设它必须是更改密码表单,而不是登录表单.因此,请确保为您允许的任何表单使用2个密码字段(新的并确认新的)

• 不幸的是,Chrome 34会在看到密码字段时尝试使用user/pass自动填充字段.这是一个非常糟糕的错误,希望它们会改变Safari的行为.但是,将此添加到表单顶部似乎禁用密码自动填充:

  <input type="text" style="display:none">
  <input type="password" style="display:none">
  

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

Answer 4

有时甚至autocomplete = off也不会阻止将凭据填入错误的字段,而不是用户或昵称字段.

这个解决方法是apinstein关于浏览器行为的帖子的补充.

将浏览器自动填充修复为只读并在焦点上设置可写(单击和选项卡)

 <input type="password" readonly  
     onfocus="this.removeAttribute('readonly');"/>

更新:Mobile Safari将光标设置在字段中,但不显示虚拟键盘.New Fix像以前一样工作,但处理虚拟键盘:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

现场演示https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

因为浏览器自动将凭据填充到错误的文本字段!？

当有相同形式的密码字段时,我会注意到Chrome和Safari上的这种奇怪行为.我猜,浏览器会查找密码字段以插入您保存的凭据.然后它会自动填充(只是猜测由于观察)最近的textlike-input字段,它出现在DOM中的密码字段之前.由于浏览器是最后一个实例而您无法控制它,

上面的readonly-fix对我有用.

Answer 5

<form name="form1" id="form1" method="post" 
      autocomplete="off" action="http://www.example.com/form.cgi">

这将适用于Internet Explorer和Mozilla FireFox,缺点是它不是XHTML标准.

Answer 6

Chrome的解决方案是添加autocomplete="new-password"到输入类型密码.

例:

<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>

如果找到一个类型为密码的框,则Chrome始终会自动填充数据,足以指示该框autocomplete = "new-password".

这对我很有用.

注意:请确保F12您的更改生效,很多时候浏览器会将页面保存在缓存中,这给我的印象是它不起作用,但浏览器实际上没有带来更改.

Answer 7

正如其他人所说,答案是 autocomplete="off"

但是,我认为值得说明为什么在某些情况下使用它是一个好主意,因为对此的一些答案和重复的问题表明最好不要关闭它.

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

在信用卡安全代码的字段上关闭它尤为重要.正如此页面所述:

"永远不要存储安全代码......它的价值取决于这样的假设:提供它的唯一方法是从实体信用卡中读取它,证明提供它的人实际上持有了卡."

问题是,如果它是一台公共计算机(网吧,图书馆等),那么其他用户很容易窃取您的卡详细信息,即使在您自己的机器上,恶意网站也可能窃取自动填充数据.

Answer 8

我不得不乞求与那些避免禁用自动完成的答案不同.

提出的第一件事是在登录表单字段上未明确禁用自动完成是PCI-DSS失败.此外,如果用户的本地计算机受到威胁,则攻击者可以轻松获得任何自动完成数据,因为它以明文形式存储.

对于可用性肯定存在争议,但是当涉及到哪些表单字段应该禁用自动完成时哪些不应该是非常好的平衡.

Answer 9

我通过使用随机字符解决了谷歌Chrome的无休止的争斗.

<input name="name" type="text" autocomplete="rutjfkde">

希望它能帮助其他人.

Answer 10

三种选择:第一种:

<input type='text' autocomplete='off' />

第二:

<form action='' autocomplete='off'>

第三(javascript代码):

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

Answer 11

在相关或实际上,在完全相反的说明 -

"如果您是上述表单的用户并希望重新启用自动填充功能,请使用此bookmarklets页面中的'记住密码'书签.它会删除autocomplete="off"页面上所有表单的所有属性.继续战斗! "

Answer 12

刚设置autocomplete="off".这样做有一个很好的理由:您想提供自己的自动完成功能!

Answer 13

我们确实在一个网站上使用了sasb的想法.这是一个运行医生办公室的医疗软件网络应用程序.然而,我们的许多客户都是使用许多不同工作站的外科医生,包括半公共终端.因此,他们希望确保不了解自动保存密码含义或不注意密码的医生不会意外地使他们的登录信息易于访问.当然,这是在私人浏览的概念开始出现在IE8,FF3.1等之前.即便如此,许多医生被迫在医院中使用旧的学校浏览器,其IT不会改变.

因此,我们让登录页面生成随机字段名称,该名称仅适用于该帖子.是的,它不太方便,但它只是让用户头脑中没有在公共终端上存储登录信息.

Answer 14

在这次谈话中,没有一个解决方案适合我.

我终于找到了一个纯HTML解决方案,它不需要Javascript,在现代浏览器中工作(除了IE;必须至少有一个捕获,对吗？),并且不要求你为整个表单禁用自动完成.

只需关闭自动完成功能form,然后将其打开input即可在表单中使用.例如:

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

Answer 15

我一直在尝试无穷无尽的解决方案,然后我发现了这个:

而autocomplete="off"不仅仅是简单地使用autocomplete="false"

就这么简单,它就像谷歌Chrome中的魅力一样!

Answer 16

我认为autocomplete=offHTML 5支持.

问问自己为什么要这样做 - 在某些情况下可能有意义,但不要仅仅为了这样做.

它对用户来说不太方便,甚至在OS X中也没有安全问题(Soren在下面提到).如果您担心人们的密码被远程窃取 - 即使您的应用程序使用,按键记录器仍然可以执行此操作autcomplete=off.

作为选择让浏览器记住(大部分)我的信息的用户,如果您的网站不记得我的信息,我会觉得很烦人.

Answer 17

这适合我.

<input name="pass" type="password" autocomplete="new-password" />

我们也可以在其他控件中使用此策略,如文本,选择等

Answer 18

尝试添加

readonly onfocus ="this.removeAttribute('readonly');"

此外

自动填充="关闭"

到你不想记住表单数据(输入(S) username,password等等),如下图所示:

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

更新:以下是基于此方法的完整示例,可防止拖放,复制,粘贴等.

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >

测试在主流浏览器的最新版本的IE Google Chrome,Mozilla Firefox,Microsoft Edge,等,并没有任何问题的工作.希望这可以帮助...

Answer 19

游戏有点晚了...但我刚遇到这个问题并尝试了几次失败,但是这个问题对我来说在MDN上找到了

在某些情况下,即使autocomplete属性设置为off,浏览器也会继续建议自动完成值.对于开发人员来说,这种意想不到的行为非常令人费解 真正强制不完成的技巧是为属性分配一个随机字符串,如下所示:

autocomplete="nope"

Answer 20

最好的解决方案:

防止自动填充用户名(或电子邮件)和密码:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

防止自动填充字段:

<input type="text" name="field" autocomplete="nope">

说明: autocomplete继续工作<input>,autocomplete="off"不起作用,但您可以更改off为随机字符串,如nope.

适用于:

• Chrome:49,50,51,52,53,54,55,56,57,58,59,60,61,62,63和64

• Firefox:44,45,46,47,48,49,50,51,52,53,54,55,56,57和58

Answer 21

添加

autocomplete="off"

到表单标记将禁用该input特定表单中所有字段的浏览器自动完成(以前在该字段中键入的内容).

测试:

• Firefox 3.5,4 BETA
• Internet Explorer 8
• 铬

Answer 22

对字段使用非标准名称和id,因此而不是"name"具有"name_".浏览器将不会将其视为名称字段.关于它的最好的部分是你可以对一些但不是所有字段执行此操作,它将自动完成一些但不是所有字段.

Answer 23

为了避免无效的XHTML,您可以使用javascript设置此属性.使用jQuery的示例:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

问题是没有javascript的用户会获得自动完成功能.

Answer 24

添加autocomplete="off"不会削减它.

将输入类型属性更改为type="search".
Google不会将自动填充应用于具有某种搜索类型的输入.

Answer 25

如果autocomplete="off"不起作用也尝试这些:

autocorrect="off" autocapitalize="off" autocomplete="off"

Answer 26

这是浏览器现在忽略的安全问题.浏览器使用输入名称识别和存储内容,即使开发人员认为信息敏感且不应存储.在2个请求之间输入名称不同将解决问题(但仍将保存在浏览器的缓存中,并且还会增加浏览器的缓存).要求用户在其浏览器设置中激活或取消激活选项不是一个好的解决方案.问题可以在后端修复.

这是我的修复.我在我的框架中实现的方法.所有自动完成元素都使用隐藏输入生成,如下所示:

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

然后服务器处理这样的post变量:

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

可以照常访问该值

var_dump($_POST['username']);

并且浏览器将无法建议先前请求或先前用户的信息.

即使浏览器更新,所有工作都像魅力,想要忽略自动完成.这是解决这个问题的最好方法.

Answer 27

据报道,我不敢相信这仍是一个问题.以上解决方案对我来说不起作用,因为safari似乎知道元素何时没有显示或屏幕外,但以下对我有用:

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

希望对某人有用!

Answer 28

所以这是它:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

Answer 29

现在事情发生了变化，因为我自己尝试了旧的答案不再有效。

我确信它会起作用的实施。我在 Chrome、Edge 和 Firefox 中对此进行了测试，结果确实有效。您也可以尝试一下并告诉我们您的经验。

set the autocomplete attribute of the password input element to "new-password"

<form autocomplete="off">
....other element
<input type="password" autocomplete="new-password"/>
</form>

这是根据MDN

如果您正在定义一个用户管理页面，其中用户可以为另一个人指定新密码，因此您希望防止自动填充密码字段，您可以使用autocomplete="new-password"

这是一个提示，浏览器不需要遵守。<input> 然而，出于这个原因，现代浏览器已经停止使用 autocomplete="new-password" 自动填充元素。

Answer 30

这里提到的黑客都没有在Chrome中为我工作.这里有一个关于这个问题的讨论:https://code.google.com/p/chromium/issues/detail？id = 468153#c41

在<form>作品中添加这个(至少现在):

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Answer 31

您可以在输入中使用.

例如;

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

Answer 32

许多现代浏览器不再支持对登录字段使用autocomplete =“ off”。 autocomplete="new-password"相反，WDN会触发更多信息MDN文档

Answer 33

没有假输入,没有javascript!

无法在浏览器中一致地禁用自动填充功能.我已经尝试了所有不同的建议,但它们都不适用于所有浏览器.唯一的方法是根本不使用密码输入.这是我想出的:

<style type="text/css">
    @font-face {
        font-family: 'PasswordDots';
        src: url('text-security-disc.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    input.password {
        font-family: 'PasswordDots' !important;
        font-size: 8px !important;
    }
</style>

<input class="password" type="text" spellcheck="false" />

下载:text-security-disc.woff

这是我最终结果的样子:

负面影响是可以从输入中复制纯文本,尽管应该可以使用某些JS来防止这种情况.

Answer 34

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

TL; 博士

将您的输入字段名称和字段 ID 重命名为不相关的名称，例如'data_input_field_1'. 然后将‌字符添加到标签的中间。这是一个非打印字符，因此您不会看到它，但它会诱使浏览器不将该字段识别为需要自动完成的字段，因此不会显示内置的自动完成小部件！

细节

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

所以我们需要使用一些技巧来让浏览器不显示内置的自动完成小部件。我们这样做的方法是让浏览器相信该字段根本不是地址字段。

首先将id和name属性重命名为不会泄露您正在处理与地址相关的数据的内容。因此，与其使用<input type="text" id="city-input" name="city">，不如使用类似的东西<input type="text" id="input-field-3" name="data_input_field_3">。浏览器不知道 data_input_field_3 代表什么。但你做了。

如果可能，不要使用占位符文本，因为大多数浏览器也会考虑到这一点。如果您必须使用占位符文本，那么您必须发挥创意并确保您没有使用任何与地址参数本身相关的词（如City）。使用类似的东西Enter location可以解决问题。

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

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

希望这对您的努力有所帮助！

Answer 35

Chrome浏览器正计划对此提供支持。

目前，最好的建议是使用很少自动完成的输入类型。

铬讨论

<input type='search' name="whatever" />

为了与Firefox兼容，请使用正常的autocomplete ='off'

<input type='search' name="whatever" autocomplete='off' />

Answer 36

如果您删除form标签，则可以禁用自动完成功能，这是我的银行所做的，我想知道他们是如何做到的。删除标签后，它甚至还会删除浏览器已经记住的值。

Answer 37

<input autocomplete="off" aria-invalid="false" aria-haspopup="false" spellcheck="false" />

我发现它在所有浏览器上都适用。当我仅使用自动完成功能时，它不起作用，除非我组合了您看到的所有属性。我还从谷歌表单输入字段得到了解决方案

Answer 38

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        try {
            $("input[type='text']").each(function(){
                           $(this).attr("autocomplete","off");
                        });
        }
        catch (e)
        { }
    });

</script>

Answer 39

这就是我们所说的文本框自动完成功能。 我们可以通过2种方式禁用文本框的自动完成功能：

1. 按浏览器标签

2. 通过代码

   要在浏览器中禁用，请转到设置

   

转到高级设置，然后取消选中复选框，然后再单击“还原”。

如果要禁用编码标签，可以执行以下操作：
使用AutoCompleteType="Disabled"：

<asp:TextBox runat="server" ID="txt_userid" AutoCompleteType="Disabled"></asp:TextBox>  

通过设置表格autocomplete="off"：

<asp:TextBox runat="server" ID="txt_userid" autocomplete="off"></asp:TextBox> 

通过设置表格autocomplete="off"：

<form id="form1" runat="server" autocomplete="off">  
    //your content
</form>  

通过使用.cs页中的代码

protected void Page_Load(object sender, EventArgs e)  
    {  
    if(!Page.IsPostBack)  
    {  


        txt_userid.Attributes.Add("autocomplete", "off");  

    }  
}  

通过使用jQuery

head runat="server">  
<title></title>  
<script src="Scripts/jquery-1.6.4.min.js"></script>  
<script type="text/javascript">  
    $(document).ready(function () {  
        $('#txt_userid').attr('autocomplete', 'off');  

    });  

</script>  

Answer 40

如果您的问题是密码字段已自动填写，那么您可能会发现这很有用...

我们在网站的多个区域中遇到了此问题，企业希望重新查询用户的用户名和密码，特别是由于合同原因，不希望密码自动填充有效。我们发现最简单的方法是在不更改实际密码字段的情况下，为浏览器输入一个假密码字段，以供查找和填写。

<!-- This is a fake password input to defeat the browser's autofill behavior -->
<input type="password" id="txtPassword" style="display:none;" />
<!-- This is the real password input -->
<input type="password" id="txtThisIsTheRealPassword" />

请注意，在Firefox和IE中，将任何类型的password输入放在实际输入之前就足够了，但是Chrome浏览器看到了这一点，并迫使我实际为假密码输入命名（通过提供明显的密码id）以将其输入“咬”。我使用了一个类来实现样式，而不是使用嵌入式样式，因此，如果以上内容由于某种原因而无法使用，请尝试使用该类。

Answer 41

您可以autocomplete="off"像下面的代码一样简单地将HTML字段放入HTML字段中。

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

Answer 42

用只读方式发布的答案dsuess非常聪明且有效。但是当我使用boostrap时，只读输入字段被标记为灰色背景，直到聚焦为止。加载文档时，您可以通过简单地锁定和解锁输入来欺骗浏览器。

因此，我有了一个将其实现到jQuery解决方案中的想法：

    jQuery(document).ready(function () {
        $("input").attr('readonly', true);
        $("input").removeAttr('readonly');
   });

Answer 43

我的问题主要是使用Chrome自动填充，但是我认为这可能比自动填充问题更大。

技巧：使用计时器重设表单并将密码字段设置为空白。100ms的持续时间似乎是最小的。

$(document).ready(function() {
    setTimeout(function() {
        var $form = $('#formId');
        $form[0].reset();
        $form.find('INPUT[type=password]').val('');
    }, 100);
});

Answer 44

我用这个TextMode="password" autocomplete="new-password"并且在aspx页面加载中txtPassword.Attributes.Add("value", '');

Answer 45

Google Chrome浏览器会忽略autocomplete="off"某些输入的属性，包括密码输入和按名称检测到的常用输入。

例如，如果您输入的名称为address，则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">