代码之家  ›  专栏  ›  技术社区  ›  Brett Veenstra

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

  •  2439
  • Brett Veenstra  · 技术社区  · 17 年前

    你怎么禁用 autocomplete 在主要浏览器中 input (或) form field )?

    62 回复  |  直到 6 年前
        1
  •  2362
  •   Dave Jarvis James Eichele    10 年前

    火狐30忽略 autocomplete="off" 对于密码,选择提示用户是否应将密码存储在客户端。请注意以下内容 commentary 2014年5月5日起:

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

    根据 Mozilla developer documentation 表单元素属性 autocomplete 防止在旧浏览器中缓存表单数据。

    <input type="text" name="foo" autocomplete="off" />
    
        2
  •  268
  •   CodeCaster    7 年前

    除了 autocomplete=off 您也可以让表单域的名称由生成页面的代码随机化,或者在名称的末尾添加一些特定于会话的字符串。

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

        3
  •  198
  •   Zub Pat M    7 年前

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

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

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

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

    Web开发人员要做什么?

    • 如果您可以将所有密码字段单独保存在一个页面上,这是一个很好的开始,因为似乎密码字段的存在是用户/密码自动完成启动的主要触发器。否则,请阅读下面的提示。
    • 游猎 注意到有2个密码字段,在这种情况下禁用自动完成功能,假定它必须是更改密码表单,而不是登录表单。因此,只要确保在允许的任何表单中使用2个密码字段(新建和确认新建)
    • 34,不幸的是,当用户/通行证看到密码字段时,将尝试自动填充字段。这是一个非常糟糕的错误,希望他们能改变狩猎行为。但是,将此项添加到表单顶部似乎会禁用密码自动填充:

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

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

        4
  •  128
  •   Zub Pat M    7 年前

    有时 偶数自动完成=关闭 不防止填充 在凭证中输入错误的字段,而不是用户或昵称字段。

    这个解决方法是对Apinstein关于浏览器行为的文章的补充。

    以只读方式修复浏览器自动填充,并将焦点设置为可写(单击并选项卡)

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

    更新: MobileSafari在字段中设置光标,但不显示虚拟键盘。新的修复程序和以前一样工作,但处理虚拟键盘:

    <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/

    //UpDead Enter

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

    当Chrome和Safari中有密码字段时,我注意到这种奇怪的行为。 同样的形式。 我想,浏览器会寻找一个密码字段来插入您保存的凭证。然后它自动填充(只是由于观察而猜测)最近的类似文本的输入字段,该字段出现在dom中密码字段之前。因为浏览器是最后一个实例,您不能控制它,

    上面这个只读修复程序对我有效。

        5
  •  95
  •   Raghav Dinesh    7 年前
    <form name="form1" id="form1" method="post" 
          autocomplete="off" action="http://www.example.com/form.cgi">
    

    这将在Internet Explorer和Mozilla Firefox中工作,缺点是它不是XHTML标准。

        6
  •  66
  •   Geynen    8 年前

    铬的解决方案是添加 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确保更改生效,浏览器多次将页面保存在缓存中,这给了我一个坏印象,认为它不起作用,但浏览器实际上没有带来更改。

        7
  •  55
  •   Zub Pat M    7 年前

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

    不过,我认为值得一提的是 为什么? 在某些情况下,最好用这个来回答这个问题 duplicate 问题表明最好不要关掉它。

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

    关闭信用卡安全代码字段尤为重要。AS this page 国家:

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

    问题是,如果它是一台公共计算机(网吧、图书馆等),那么其他用户很容易窃取您的卡详细信息,甚至在您自己的计算机上,恶意网站也可能 steal autocomplete data .

        8
  •  30
  •   Chris Baker    11 年前

    为了避免禁用自动完成,我不得不和那些答案不同。

    首先要提到的是,在登录表单字段上未显式禁用自动完成是PCI-DSS失败。此外,如果用户的本地计算机受到破坏,则攻击者可以通过将任何自动完成数据存储在clear中的方式获取这些数据。

    当然有一个关于可用性的争论,但是当涉及到哪些表单字段应该禁用自动完成功能,哪些不应该禁用时,有一个非常好的平衡。

        9
  •  28
  •   Sjon    9 年前

    三种选择: 第一:

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

    第二:

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

    第三个(javascript代码):

    $('input').attr('autocomplete', 'off');
    
        10
  •  18
  •   Jibran Khan    10 年前

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

        11
  •  18
  •   SuperBiasedMan Jayesh Kalkani    10 年前

    我一直在尝试无限的解决方案,然后我发现:

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

    就这么简单,它在谷歌Chrome中也很有魅力!

        12
  •  18
  •   Raghav Dinesh    7 年前

    在一个相关的或事实上,在完全相反的音符上-

    “如果您是上述表单的用户并希望重新启用 自动完成功能,使用“记住密码” 从这个书签 bookmarklets page . 它移除 全部的 autocomplete="off" 页面上所有表单的属性。保持 打得好!”

        13
  •  17
  •   Jon Adams    16 年前

    我们确实用过 SASB 一个网站的想法。这是一个运行医生办公室的医疗软件Web应用程序。然而,我们的许多客户都是外科医生,他们使用许多不同的工作站,包括半公共终端。因此,他们希望确保不了解自动保存密码含义或不注意的医生不会意外地留下易于访问的登录信息。当然,这是在IE8、FF3.1等开始采用隐私浏览的想法之前。尽管如此,许多医生还是被迫在医院使用老式浏览器,而这种浏览器不会改变。

    所以,我们让登录页面生成随机字段名,这些字段名只对该日志有效。是的,这不太方便,但它只是让用户对不在公共终端上存储登录信息感到头疼。

        14
  •  17
  •   GDP Danny    13 年前

    我想 autocomplete=off 在HTML 5中受支持。

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

    它对用户来说不太方便,在OSX中甚至不存在安全问题(下面由Soren提到)。如果你担心人们的密码被远程窃取-即使你的应用程序使用 autcomplete=off .

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

        15
  •  17
  •   lifo    11 年前

    在这次谈话中,没有一个解决方案对我有用。

    我终于想出了一个 纯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>
    
        16
  •  15
  •   Raghav Dinesh    7 年前

    这是一种非标准的方式(我认为Mozilla和Internet Explorer仍然支持它),但打乱用户的期望是一个坏主意。

    如果用户在表单中输入信用卡详细信息,然后让其他人使用该浏览器,这不是您的问题。:)

        17
  •  13
  •   DisplayName    7 年前

    这对我有用。

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

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

        18
  •  12
  •   Cava    7 年前

    最佳解决方案:

    阻止自动完成用户名(或电子邮件)和密码:

    <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 .

    作品:

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

    • 火狐:44、45、46、47、48、49、50、51、52、53、54、55、56、57和58

        19
  •  12
  •   step    7 年前

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

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

    希望对别人有帮助。

        20
  •  11
  •   Jonas G. Drange    13 年前

    添加

    autocomplete="off"

    到表单标记将禁用所有 input 特定表单中的字段。

    测试:

    • 火狐3.5,4测试版
    • Internet Explorer 8
        21
  •  11
  •   AAH-Shoot    9 年前

    比赛稍微晚了一点……但我遇到了这个问题,尝试了几次失败,但这一次对我有用 MDN

    在某些情况下,浏览器会不断建议自动完成值 即使“自动完成”属性设置为“关闭”。这意外 对于开发人员来说,行为可能非常令人费解。真正的诀窍 强制不完成是为属性分配一个随机字符串 像这样:

    autocomplete="nope"
    
        22
  •  10
  •   Teifion    17 年前

    对字段使用非标准名称和ID,因此不要使用“名称”而使用“名称”。浏览器将不会将其视为名称字段。其中最好的一点是,您可以对某些字段(但不是所有字段)执行此操作,并且它将自动完成某些字段(但不是所有字段)。

        23
  •  10
  •   cherouvim    14 年前

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

    <input type="text" class="noAutoComplete" ... />
    
    $(function() {
        $('.noAutoComplete').attr('autocomplete', 'off');
    });
    

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

        24
  •  10
  •   Matas Vaitkevicius user3782709    9 年前

    添加 autocomplete="off" 不会割伤它的。

    将输入类型属性更改为 type="search" .
    谷歌不会对搜索类型的输入应用自动填充。

        25
  •  10
  •   Murat Yıldız    6 年前

    尝试添加

    readonly onfocus=“此.removeattribute('readonly');”

    除了

    autocomplete=“关闭”

    到您不想记住表单数据的输入( 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" >
    

    测试主要浏览器的最新版本,即 Google Chrome , Mozilla Firefox , Microsoft Edge 等等,并且毫无问题地工作。希望这有帮助…

        26
  •  8
  •   Ed Heal    12 年前

    如果只是 autocomplete="off" 不起作用:

    autocorrect="off" autocapitalize="off" autocomplete="off"
    
        27
  •  8
  •   Ben    9 年前

    我不敢相信这在报道这么久之后仍然是个问题。上述解决方案对我不起作用,因为Safari似乎知道元素何时没有显示或屏幕外,但是以下解决方案对我起作用:

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

    希望对某人有用!

        28
  •  8
  •   community wiki 5 revs, 3 users 93% Simmoniz    7 年前

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

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

    <? $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']);
    

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

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

        29
  •  7
  •   Jakob Løkke Madsen    10 年前

    这里提到的黑客没有一个对我有用。 这里有一个关于这个问题的讨论: 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>
    
        30
  •  6
  •   xxxxx    12 年前

    您可以在输入中使用。

    例如;

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