如何禁用Web表单域/输入标签上的浏览器自动完成功能?

zet 发布于 2018-02-24 autocomplete 最后更新 2018-02-24 10:33 1510 浏览

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

已邀请:

qullam

赞同来自:

Firefox 30会忽略autocomplete="off"的密码,因此选择提示用户,而不是将密码存储在客户端。请注意2014年5月5日起的以下commentary

  • The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.
  • We are the third browser to implement this change, after IE and Chrome.
根据Mozilla developer documentation,表单元素属性autocomplete可防止表单数据在旧浏览器中缓存。
<input type="text" name="foo" autocomplete="off" />

yeum

赞同来自:

是一个没有标准的方法来做到这一点(我认为mozilla和IE仍然支持它),但与用户的期望混乱通常是一个坏主意。 如果用户将他们的信用卡信息输入到表单中,然后让其他人使用该浏览器,那么这不是您的担心:)

ut_et

赞同来自:

为字段使用非标准名称和ID,因此而不是“name”具有“name_”。浏览器将不会将其视为名称字段。最好的部分是你可以做到这一点,但不是所有的领域,它会自动完成一些,但不是所有的领域。

wet

赞同来自:

<form name="form1" id="form1" method="post" 
      autocomplete="off" action="http://www.example.com/form.cgi">
这将在IE和FF中工作,缺点是它不是XHTML标准。

nautem

赞同来自:

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

et_et

赞同来自:

如果您是上述表单的用户并且想要重新启用自动填充功能,请使用此bookmarklets page中的“记住密码”书签。它会从页面上的所有表单中删除所有'autocomplete =“off”'属性。继续打好战斗!

ueum

赞同来自:

为什么你会让用户的生活变得不方便? “不应该保存密码/信用卡数据/等等”是一个不好的说法:随着自动完成的开启,Mac OS X中的浏览器将这些值存储在具有每个应用程序权限的加密数据库中。相反,autocomplete=off的实际效果是什么?用户将把它写在一个未加密的文本文件中,或者更好的方式是将它写在屏幕上的便签纸上。 好东西有像Antti提到的小书签和patches to make the engine ignore the attribute altogether。 说真的,我敦促你重新考虑使用这个属性。它确实对 没有任何好处。

lquia

赞同来自:

我们实际上对一个网站使用了 sasb 的想法。这是一个运行医生办公室的医疗软件网络应用程序。然而,我们的许多客户都是外科医生,他们使用了许多不同的工作站,包括半公共终端。因此,他们希望确保不了解自动保存密码的意义或不注意的医生不会意外地将其登录信息轻松访问。当然,这是在IE8,FF3.1等开始提供隐私浏览功能之前。即便如此,许多医生也不得不在医院中使用旧式浏览器,而这些浏览器不会改变。 所以,我们有登录页面生成随机字段名称,只能用于该帖子。是的,这不太方便,但它只是让用户头脑不灵活,无法在公共终端上存储登录信息。

ksequi

赞同来自:

autocomplete=off之外,您还可以将表单字段名称随机生成页面的代码,也许可以在名称末尾添加一些特定于会话的字符串。表单提交后,您可以在处理服务器端之前剥离该部分off。这将阻止Web浏览器为您的字段查找上下文,并且可能有助于防止 XSRF 攻击,因为攻击者无法猜测表单提交的字段名称。

yeum

赞同来自:

正如其他人所说,答案是autocomplete="off" 不过,我认为值得一提的是为什么在某些情况下使用此功能是一个好主意,因为此问题的一些答案和duplicate问题表明最好不要关闭。 停止存储信用卡号码的浏览器不应留给用户。太多用户甚至不会意识到这是一个问题。 在信用卡安全码的字段中关闭它尤其重要。正如this page所述

"Never store the security code ... its value depends on the presumption that the only way to supply it is to read it from the physical credit card, proving that the person supplying it actually holds the card."
问题是,如果是公共计算机(网吧,图书馆等),其他用户很容易窃取你的卡片细节,甚至在你自己的机器上,恶意网站可能会出现steal autocomplete data

eearum

赞同来自:

为了避免无效的XHTML,你可以使用javascript设置这个属性。使用jQuery的示例:

<input type="text" class="noAutoComplete" ... />
$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});
问题是,没有JavaScript的用户将获得自动完成功能。

nnihil

赞同来自:

添加 autocomplete="off" 到表单标签将禁止该特定表单中所有input字段的浏览器自动填充(以前输入到该字段中的内容)。 测试时间:

  • Firefox 3.5,4 BETA
  • Internet Explorer 8

yut

赞同来自:

我认为autocomplete=off在HTML 5中受支持。 问问你自己为什么要这样做 - 在某些情况下可能有意义,但不要仅仅为了做到这一点。 用户不太方便,甚至没有OS X的安全问题(下面由Soren提到)。如果您担心有人远程窃取密码 - 即使您的应用使用了autcomplete=off,按键记录器仍然可以执行此操作。 作为选择使用浏览器的用户记得(大部分)我的信息,如果您的网站不记得我的信息,我会发现它很烦人。

nodio

赞同来自:

我不得不乞求与那些表示避免禁用自动完成的答案不同。 首先要注意的是,在登录表单字段中未显式禁用自动完成是PCI-DSS失败。另外,如果用户的本地机器受到攻击,那么攻击者可以轻易获得任何自动完成数据,因为它存储在明文中。 当然有一个可用性的论点,但是当涉及到哪些表单字段应该禁用自动完成并且哪些不应该的时候,就会有非常好的平衡。

onam

赞同来自:

您可以在输入中使用。 例如;

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

zquam

赞同来自:

如果只是autocomplete="off"不起作用,请尝试以下操作:

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

uut

赞同来自:

三种选择: 第一:

<input type='text' autocomplete='off' />
第二:
<form action='' autocomplete='off'>
第三(javascript代码):
$('input').attr('autocomplete', 'off');

ksed

赞同来自:

在这次谈话中,没有任何解决方案适用于我。 我终于找到了一个纯HTML解决方案,它需要没有Javascript ,适用于现代浏览器(IE除外;必须至少有一个catch,对吧?要求您为整个表单禁用自动完成功能。 只需关闭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>

nut

赞同来自:

大多数主流浏览器和密码管理器(正确的,恕我直言)现在忽略autocomplete=off。 为什么?为安全起见,许多银行和其他“高安全性”网站将autocomplete=off添加到他们的登录页面,但这实际上降低了安全性,因为它会导致人们更改这些高安全性网站上的密码,以便自动填充以便于记忆(并因此破解)坏了。 很久以前,大多数密码管理器开始忽略autocomplete=off,现在浏览器开始只对用户名/密码输入做同样的事情。 不幸的是,自动完成实现中的错误会将用户名和/或密码信息插入到不适当的表单域中,导致表单验证错误,或者更糟糕的是,意外地将用户名插入到用户故意留空的字段中。 什么是Web开发人员要做的?

  • 如果您可以自行保留网页上的所有密码字段,那么这是一个很好的开始,因为密码字段的存在似乎是触发用户/通过自动填充的主要触发器。否则,请阅读下面的提示。
  • Safari 注意到在这种情况下有2个密码字段并禁用自动完成功能,前提是它必须是更改密码表单,而不是登录表单。因此,只要您允许使用任何表单,请务必使用2个密码字段(新的和确认新的)
  • Chrome 34不幸的是,只要看到密码字段,就会尝试使用用户名/密码自动填充字段。这是一个非常糟糕的错误,希望它们会改变为Safari的行为。但是,将此添加到表单的顶部似乎禁用了密码自动填充功能:
    <input type="text" style="display:none">
    <input type="password" style="display:none">
    
    我还没有彻底调查IE或Firefox,但如果其他人在评论中有信息,我会很乐意更新答案。

wnatus

赞同来自:

有时甚至自动完成=关闭都不会阻止将凭据填充到错误的字段中,但不会阻止用户或昵称字段。 此解决方法除了apinstein关于浏览器行为的文章之外。 修复浏览器自动填写:只读,并设置焦点(单击和制表符)

 <input type="password" readonly  
     onfocus="this.removeAttribute('readonly');"/>
更新: 移动Safari在该字段中设置光标,但不显示虚拟键盘。新的修复工作像以前一样,但处理虚拟键盘:
<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浏览器出现相同形式的密码字段时,我注意到这种奇怪的行为。我猜,浏览器会查找密码字段以插入已保存的凭据。然后它自动填充(只是由于观察而猜测)最近的文本类型输入字段,它出现在DOM中的密码字段之前。由于浏览器是最后一个实例,您无法控制它, 这只读修复上面为我工作。

menim

赞同来自:

我一直在尝试无尽的解决方案,然后我发现: 而不是autocomplete="off"只需简单地使用autocomplete="false" 就这么简单,它在谷歌Chrome浏览器中的魅力也是如此!

bquia

赞同来自:

这是浏览器现在忽略的安全问题。即使开发人员认为信息敏感并且不应该存储,浏览器也可以使用输入名称标识和存储内容。在两个请求之间创建一个输入名称将会解决问题(但仍然会保存在浏览器的缓存中,并且还会增加浏览器的缓存)。要求用户在其浏览器设置中激活或停用选项不是一个好的解决方案。该问题可以在后端修复。 这是我的修复。我在框架中实施的一种方法。所有的自动完成元素都是用这样的隐藏输入生成的:

<? $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']);
浏览器将无法建议来自先前请求或以前用户的信息。 即使浏览器更新,所有作品都像魅力一样,都想要忽略自动完成功能。这是解决这个问题的最佳方式。

inemo

赞同来自:

这里提到的所有黑客都没有在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>

wquod

赞同来自:

我知道这是一个旧帖子,但知道Firefox(我认为只有firefox)使用一个名为ismxfilled的基本上强制自动完成的值可能很重要。 ismxfilled="0" OFF 要么 ismxfilled="1"代表ON

frem

赞同来自:

添加autocomplete="off"不会削减它。 将输入类型属性更改为type="search"
Google不会将自动填充应用于具有搜索类型的输入。

mut

赞同来自:

如果您从JavaScript动态设置autocomplete="off",Safari不会改变自动完成的想法。但是,如果你以每场为基础做到这一点,它会尊重。

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

wsint

赞同来自:

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

lquia

赞同来自:

Chrome是planning to support this。 现在最好的建议是使用很少自动完成的输入类型。 chrome discussion

<input type='search' name="whatever" />
要与Firefox兼容,请使用正常的自动完成='关闭'
<input type='search' name="whatever" autocomplete='off' />

iut

赞同来自:

如果您删除了form标记,则可以禁用自动完成功能,我的银行也完成了同样的功能,但我想知道他们是如何做到这一点的。它甚至删除标签后已被浏览器记住的值。

uet

赞同来自:

这就是我们称之为文本框的自动填充。 enter image description here 我们可以通过两种方式禁用文本框的自动完成功能 -

  1. 通过浏览器标签
  2. 通过代码 要在浏览器中禁用,请转到设置 To dissable in browse go to the setting
Go to advance setting and uncheck the checkbox and then Restore. 进入高级设置并取消选中复选框,然后选择恢复。 如果你想在编码标签中禁用,你可以按照以下步骤操作 使用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>  

oillo

赞同来自:

有点迟到游戏...但我遇到了这个问题,并尝试了几次失败,但这一个适用于我找到MDN

In some case, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really force the no-completion is to assign a random string to the attribute like so :
autocomplete="nope"

yautem

赞同来自:

我不敢相信,在它被报道后,这仍然是一个问题。上述解决方案对我来说并不适用,因为safari似乎知道元素何时不显示或不在屏幕上,但以下方法对我来说很合适:

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>
希望对别人有用!

et_et

赞同来自:

如果你的问题是有一个密码字段被自动完成,那么你可能会觉得这很有用... 我们在我们网站的几个区域发生了这个问题,企业希望重新向用户询问他们的用户名和密码,并且特别不希望密码自动填写因合同原因而工作。我们发现,最简单的方法是在真正的密码字段保持不变的情况下,为浏览器找到并填充假密码字段。

<!-- 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中,仅仅在输入密码之前输入密码就足够了,但Chrome浏览器却发现了这一点,并强迫我实际命名假密码输入(通过给它一个明显的密码ID) “咬”。我使用一个类来实现样式,而不是使用嵌入式样式,所以如果以上因为某些原因不起作用,请尝试。

qanimi

赞同来自:

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

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

gquia

赞同来自:

所以这里是:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}
<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

jiusto

赞同来自:

readonly发布的答案 dsuess 非常聪明并且很有效。但是,当我使用boostrap时,只读输入字段 - 直到聚焦 - 标记为灰色背景。在文档加载时,您可以通过简单地锁定和解锁输入来欺骗浏览器。 所以我有一个想法实现这个jQuery解决方案:

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

sesse

赞同来自:

我的问题主要是Chrome自动填充,但我认为这可能比自动填充更成问题。 招:使用计时器重置表单并将密码字段设置为空白。 100ms的持续时间似乎是最小的工作。

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

xnobis

赞同来自:

我使用以下jQuery代码片段:

// Prevent input autocomplete
$.fn.preventAutocomplete = function() {
    this.each(function () {
        var $el = $(this);
        $el
            .clone(false, false)
            .insertBefore($el)
            .prop('id', '')
            .hide()
        ;
    });
};
而不仅仅是$('#login-form input').preventAutocomplete();

xporro

赞同来自:

解决方法是不要在用户想要更改密码之前将密码字段插入到DOM中。这可能适用于某些情况: 在我们的系统中,我们有一个密码字段,在管理页面中,所以我们必须避免无意中设置其他用户的密码。出于这个原因,该表单有一个额外的复选框,可以切换密码字段的可见性。 所以在这种情况下,来自密码管理器的自动填充变成了一个双重问题,因为输入甚至不会被用户看到。 解决方案是让复选框触发是否将密码字段插入到DOM中,而不仅仅是其可见性。 AngularJS的伪实现:

<input type="checkbox" ng-model="createPassword">
<input ng-if="changePassword" type="password">

podio

赞同来自:

我想澄清,这个答案是完整的,为了社区的知识,决不是建议。 关于Internet Explorer 11,有一项可用于阻止自动填充的安全功能。它是这样工作的: 任何在用户输入后修改的表单输入值都被标记为不适合自动填充。 此功能通常用于保护用户免遭恶意网站的侵害,这些恶意网站在您输入密码后需要更改密码。 但是,您可以在密码字符串的开头插入一个特殊字符来阻止自动完成。这个特殊字符可以在管道后面检测到并移除。

tut

赞同来自:

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"
This works well for me.
注意:确保F12的更改生效,浏览器多次将页面保存在缓存中,这给我一个糟糕的印象,即它不起作用,但浏览器实际上并未带来这些更改。

et_id

赞同来自:

这为我工作。

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

iest

赞同来自:

如果不使用组合的客户端和服务器端代码,似乎不可能实现这一点。 为了确保用户必须每次都在没有自动完成的情况下填写表单,我使用以下技术:

  1. 在服务器上生成表单字段名称,并使用隐藏的输入字段来存储这些名称,以便在提交给服务器时,服务器端代码可以使用生成的名称来访问字段值。这是为了阻止用户选择自动填充字段。
  2. 将每个表单字段的三个实例放在表单上,​​并使用css隐藏每个集合的第一个和最后一个字段,然后在使用javascript进行页面加载后禁用它们。这是为了防止浏览器自动填写字段。
这是一个小提琴,演示#2 https://jsfiddle.net/xnbxbpv4/中所述的javascript,css和html JavaScript的:
$(document).ready(function() {
    $(".disable-input").attr("disabled", "disabled");
});
CSS:
.disable-input {
  display: none;
}
HTML:
<form>
<input type="email" name="username" placeholder="username" class="disable-input">
<input type="email" name="username" placeholder="username">
<input type="email" name="username" placeholder="username" class="disable-input">
<br>
<input type="password" name="password" placeholder="password" class="disable-input">
<input type="password" name="password" placeholder="password">
<input type="password" name="password" placeholder="password" class="disable-input">
<br>
<input type="submit" value="submit">
</form>
下面是使用asp.net和剃须刀的服务器代码将促进#1的一个粗略示例 模型:
public class FormModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}
控制器:
public class FormController : Controller
{
    public ActionResult Form()
    {
        var m = new FormModel();
m.Username = "F" + Guid.NewGuid().ToString();
        m.Password = "F" + Guid.NewGuid().ToString();
return View(m);
    }
public ActionResult Form(FormModel m)
    {
        var u = Request.Form[m.Username];
        var p = Request.Form[m.Password];
// todo: do something with the form values
...
return View(m);
    }
}
视图:
@model FormModel
@using (Html.BeginForm("Form", "Form"))
{
    @Html.HiddenFor(m => m.UserName)
    @Html.HiddenFor(m => m.Password)
<input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <input type="email" name="@Model.Username" placeholder="username">
    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <br>
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <input type="password" name="@Model.Password" placeholder="password">
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <br>
    <input type="submit" value="submit">
}

nerror

赞同来自:

autocomplete ='off'对我来说不起作用,无论如何,我将输入字段的value属性设置为一个空格<input type='text' name='username' value=" ">,它将默认输入字符设置为空格,并且由于用户名为空,密码也被清除了。

msed

赞同来自:

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

wqui

赞同来自:

尝试这个 :

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

nnihil

赞同来自:

尝试添加

readonly onfocus="this.removeAttribute('readonly');"
此外
autocomplete="off"
到您不想记住表单数据的输入(usernamepassword等),如下所示:
<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >
测试主要浏览器的最新版本,即Google ChromeMozilla FirefoxMicrosoft Edge等,并且毫无问题地工作。希望这可以帮助...

cid

赞同来自:

所提供的答案都不适用于我测试过的所有浏览器。基于已经提供的答案,这就是我最终在 Chrome 61 Microsoft Edge 40 (EdgeHTML 15), IE 11 < strong>, Firefox 57 Opera 49 Safari 5.1 。许多审判的结果是古怪的;但它确实对我有用。

<form autocomplete="off">
    ...
    <input type="password" readonly autocomplete="off" id="Password" name="Password" onblur="this.setAttribute('readonly');" onfocus="this.removeAttribute('readonly');" onfocusin="this.removeAttribute('readonly');" onfocusout="this.setAttribute('readonly');" />
    ...
</form>
<script type="text/javascript">
    $(function () {           
        $('input#Password').val('');
        $('input#Password').on('focus', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
    $('input#Password').on('keyup', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
    $('input#Password').on('keydown', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
</script>