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

时间:2008-08-05 16:22:33

标签: html browser autocomplete

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

92 个答案:

答案 0 :(得分:2457)

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

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

根据Mozilla Developer Network文档,布尔表单元素属性autocomplete可防止表单数据在旧版浏览器中缓存。

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

答案 1 :(得分:283)

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

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

答案 2 :(得分:208)

大多数主流浏览器和密码管理器(正确地说,恕我直言)现在忽略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,但如果其他人在评论中有信息,我们很乐意更新答案。

答案 3 :(得分:132)

有时甚至自动完成=关闭 不会阻止将凭据填入到错误的字段,而不是用户或昵称字段。

此解决方法是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对我有用。

答案 4 :(得分:97)

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

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

答案 5 :(得分:79)

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您的更改生效,很多时候浏览器将页面保存在缓存中,这给我的印象是它不起作用,但浏览器实际上没有带来更改。

答案 6 :(得分:57)

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

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

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

在信用卡安全代码的字段上关闭它尤为重要。正如this page所述:

  

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

问题是,如果它是公共计算机(网吧,图书馆等),那么其他用户就可以轻松窃取您的卡详细信息,即使在您自己的计算机上,也可能是steal autocomplete data恶意网站。

答案 7 :(得分:31)

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

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

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

答案 8 :(得分:28)

三种选择: 第一:

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

第二:

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

第三(javascript代码):

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

答案 9 :(得分:21)

我通过使用随机字符解决了与Google Chrome的无休止的战斗。当您始终使用随机字符串呈现自动完成功能时,它将永远不会记住任何内容。

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

希望对其他人有帮助。

答案 10 :(得分:20)

在相关或实际上,在完全相反的音符上 -

  

“如果您是上述表单的用户并想重新启用   自动完成功能,使用'记住密码'   来自此bookmarklets page的书签。它删除   页面上所有表单的所有autocomplete="off"属性。保持   打好斗争!“

答案 11 :(得分:19)

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

而不是autocomplete="off"只需使用autocomplete="false"

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

答案 12 :(得分:19)

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

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

答案 13 :(得分:19)

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

答案 14 :(得分:18)

我认为HTML 5支持autocomplete=off

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

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

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

答案 15 :(得分:18)

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

我终于找到了一个纯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>

答案 16 :(得分:17)

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

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

答案 17 :(得分:16)

这适合我。

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

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

答案 18 :(得分:13)

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

  

在某些情况下,浏览器会继续建议自动完成值   即使autocomplete属性设置为off。这出乎意料   对于开发人员来说,这种行为可能会令人费解诀窍真的   强制no-completion是为属性分配一个随机字符串   像这样:

autocomplete="nope"

答案 19 :(得分:13)

最佳解决方案:

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

<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

答案 20 :(得分:12)

尝试添加

  

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');" >


更新:以下是基于此方法的完整示例,该方法可阻止拖动&amp;删除复制粘贴等。

<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 ChromeMozilla FirefoxMicrosoft Edge等,并且没有任何问题。希望这会有所帮助...

答案 21 :(得分:12)

添加

autocomplete="off"

到表单标记会禁用该特定表单中所有input字段的浏览器自动填充功能(以前在该字段中键入的内容)。

经过测试:

  • Firefox 3.5,4 BETA
  • Internet Explorer 8

答案 22 :(得分:11)

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

答案 23 :(得分:11)

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

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

答案 24 :(得分:11)

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

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

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

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

答案 25 :(得分:10)

如果只有autocomplete="off"不起作用,请尝试这些:

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

答案 26 :(得分:10)

在报道之后很久,我无法相信这仍是一个问题。上述解决方案对我来说并不起作用,因为safari似乎知道元素何时没有显示或不在屏幕外,但以下内容对我有用:

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

希望对某人有用!

答案 27 :(得分:10)

这是浏览器现在忽略的安全问题。浏览器使用输入名称识别和存储内容,即使开发人员认为信息敏感且不应存储。在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>

Server然后处理这样的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']);

浏览器将无法提供先前请求或之前用户的信息。

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

答案 28 :(得分:9)

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

fluxible/addons/内部添加此内容(至少目前为止):

<form>

答案 29 :(得分:9)

所以就是这样:

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

答案 30 :(得分:8)

您可以在输入中使用。

例如;

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

答案 31 :(得分:6)

Chrome是planning to support this

现在最好的建议是使用很少自动完成的输入类型。

chrome discussion

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

与firefox兼容,使用普通的autocomplete ='off'

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

答案 32 :(得分:6)

如果您删除了form代码,则可以停用自动填充功能,我的银行也是如此,我想知道他们是如何做到这一点的。它甚至会删除删除标记后浏览器已记住的值。

答案 33 :(得分:6)

许多现代浏览器不支持autocomplete =&#34; off&#34;对于登录字段了。 autocomplete="new-password"正在考虑更多信息MDN docs

答案 34 :(得分:6)

没有假输入,没有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

以下是我的最终结果:

Password Mask

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

答案 35 :(得分:5)

我在aspx TextMode="password" autocomplete="new-password"

的页面加载中使用此txtPassword.Attributes.Add("value", '');

答案 36 :(得分:5)

我的问题主要是使用Chrome进行自动填充,但我认为这可能比自动填充更有问题。

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

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

答案 37 :(得分:5)

使用readonly发布的答案 dsuess 非常聪明且有效。但是当我使用boostrap时,readonly输入字段 - 直到聚焦 - 用灰色背景标记。加载文档时,只需锁定和解锁输入即可欺骗浏览器。

所以我有一个想法将它实现到jQuery解决方案中:

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

答案 38 :(得分:5)

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

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

答案 39 :(得分:5)

如果您的问题是自动填写了密码字段,那么您可能会觉得这很有用......

我们在网站的几个区域遇到此问题,企业希望重新查询用户的用户名和密码,特别是不希望密码自动填充按合同原因工作。我们发现,最简单的方法是在真实密码字段保持不变的情况下,为浏览器输入一个伪造的密码字段,以便查找和填充。

<!-- 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)得到它&#34;咬&#34;。我使用了一个类来实现样式,而不是使用嵌入式样式,所以试试如果上面因为某些原因而无法工作。

答案 40 :(得分:5)

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

  1. 按浏览器标签
  2. 按代码

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

    To dissable in browse go to the setting

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

答案 41 :(得分:5)

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

</script>

答案 42 :(得分:5)

对于某些输入,Google Chrome忽略def sub(vec1, vec2): if len(vec1) != len(vec2): raise ValueError return [a - b for a, b in zip(vec1, vec2)] 属性,包括密码输入和按名称检测到的常用输入。

例如,如果您输入的名称为autocomplete="off",那么Chrome会根据您在其他网站上输入的地址提供自动填充建议,即使您不输入

address

如果您不希望Chrome浏览器执行此操作,则可以重命名表单字段的名称或为其命名空间:

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

如果您不介意以前在网站上自动输入的值,则可以启用自动完成功能。命名字段名称的间距应足以防止其他网站记住的值出现。

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

答案 43 :(得分:4)

为了解决这个问题,我使用了一些CSS技巧,以下内容适用于我。

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

请阅读this文章了解更多详情。

答案 44 :(得分:4)

如果不使用组合客户端和服务器端代码,似乎无法实现此目的。

为了确保用户每次都必须在没有自动填充的情况下填写表格,我会使用以下技巧:

  1. 在服务器上生成表单字段名称,并使用隐藏的输入字段来存储这些名称,以便在提交给服务器时,服务器端代码可以使用生成的名称来访问字段值。这是为了阻止用户自动填充字段。

  2. 在表单上放置每个表单字段的三个实例,并使用css隐藏每个表的第一个和最后一个字段,然后在使用javascript加载页面后禁用它们。这是为了防止浏览器自动填写字段。

  3. 这是一个小提琴,演示了#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">
    }
    

答案 45 :(得分:4)

我知道这是一篇旧文章,但知道Firefox(我认为只有firefox)使用名为ismxfilled的值基本上强制自动完成可能很重要。

ismxfilled="0"

OFF

ismxfilled="1"

ON

答案 46 :(得分:3)

试试这个:

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

答案 47 :(得分:3)

可以说,我想要使现场管理完全脱离浏览器的功能。在此示例中,只有一个标准文本输入字段可捕获密码-无需电子邮件,用户名等。

<input id='input_password' type='text' autocomplete='off' autofocus>

有一个名为“输入”的变量,设置为空字符串...

var input = "";

字段事件由JQuery监视...

  1. 重点是始终清除字段内容和关联的“ input”变量。
  2. 在按键上,任何字母数字字符以及一些定义的符号都将附加到“输入”变量中,并且字段输入将替换为项目符号。另外,当按下Enter键时,键入的字符(存储在“输入”变量中)将通过Ajax发送到服务器。 (请参阅下面的“服务器详细信息”。)
  3. 在键入键时,使用Home,End和Arrow键可以刷新“ input”变量和字段值。 (我本来可以用箭头导航和焦点事件来实现的,然后使用.selectionStart来找出用户单击或正在导航的位置,但是在密码字段上不值得花些功夫。)此外,按Backspace键会截断这两个字段相应的变量和字段内容。

$("#input_password").off().on("focus", function(event) {
    $(this).val("");
    input = "";

}).on("keypress", function(event) {
    event.preventDefault();

    if (event.key !== "Enter" && event.key.match(/^[0-9a-z!@#\$%&*-_]/)) {
        $(this).val( $(this).val() + "•" );
        input += event.key;
    }
    else if (event.key == "Enter") {
        var params = {};
        params.password = input;

        $.post(SERVER_URL, params, function(data, status, ajax) {
            location.reload();
        });
    }

}).on("keyup", function(event) {
    var navigationKeys = ["Home", "End", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
    if ($.inArray(event.key, navigationKeys) > -1) {
        event.preventDefault();
        $(this).val("");
        input = "";
    }
    else if (event.key == "Backspace") {
        var length = $(this).val().length - 1 > 0 ? $(this).val().length : 0;
        input = input.substring(0, length);
    }
});

前端摘要

本质上,这使浏览器没有任何有用的捕获功能。即使它覆盖了自动完成设置,并且/或者使用以前输入的值显示了下拉菜单,它所存储的只是项目符号的字段。


服务器详细信息(可选)

如上所示,服务器返回JSON响应后,Javascript将立即执行location.reload()。 (此登录技术用于访问受限制的管理工具。与cookie内容有关的一些过大杀伤力可以省略,以实现更通用的实现。)以下是详细信息:

  • 当用户导航到站点时,服务器将查找合法的cookie。
  • 如果没有cookie,将显示登录页面。当用户 输入密码并通过Ajax发送,服务器确认密码并检查 查看用户的IP是否在“授权IP”列表中。
  • 如果无法识别密码或IP,则服务器不会生成cookie,因此当页面重新加载时,用户会看到相同的登录页面。
  • 如果同时识别了密码和IP,则服务器会生成一个 Cookie的寿命为10分钟,并且还存储了两个与时间范围和IP相对应的加扰值。
  • 页面重新加载时,服务器找到cookie并验证 加密后的值是正确的(即时间范围与Cookie的日期相对应,并且IP相同)。
  • 每次用户与服务器进行交互(无论是登录,显示数据还是更新记录)时,都会重复进行cookie的身份验证和更新过程。
  • 如果cookie的值始终正确,则服务器会显示完整的网站(如果用户正在登录)或完成提交的显示或更新请求。
  • 如果cookie的值在任何时候都不正确,则服务器会删除当前cookie,然后在重新加载后导致登录页面为 重新显示。

答案 48 :(得分:3)

如果您还希望阻止通用浏览器插件LastPass自动填充字段,则可以在此线程的其他建议中添加属性data-lpignore="true"。请注意,这不仅适用于密码字段。

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

前一段时间,我试图做同样的事情,但因为找不到任何建议对我有用而感到沮丧。原来是LastPass

答案 49 :(得分:3)

为防止浏览器自动用用户保存的网站登录凭据填充,请在表单顶部放置一个文本和密码输入字段,并使用非空值和样式为“位置:绝对;顶部:-999px;左侧:-999px”设置为隐藏字段。

<form>
  <input type="text" name="username_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
  <input type="password" name="password_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
  <!-- Place the form elements below here. -->
</form>

在密码字段之前输入文本字段很重要。否则,在某些情况下可能无法防止自动填充。

重要的是,文本字段和密码字段的值都不能为空,以防止在某些情况下覆盖默认值。

重要的是,这两个字段必须位于表单中“真实”密码类型字段之前。

对于兼容html 5.3的新型浏览器,自动填充属性值“ new-password”应该可以使用。

<form>
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" autocomplete="new-password" />
</form>

两种方法的组合可用于支持旧版本和新版本的浏览器。

<form>
  <div style="display:none">
    <input type="text" readonly tabindex="-1" />
    <input type="password" readonly tabindex="-1" />
  </div>
  <!-- Place the form elements below here. -->
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" autocomplete="new-password" />
</form>

答案 50 :(得分:3)

如果您从javascript动态设置autocomplete="off",Safari不会改变自动完成的想法。但是,如果你在每个领域的基础上这样做,它会受到尊重。

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

答案 51 :(得分:2)

答案很多,但是大多数答案是骇客或某种解决方法。

这里有三种情况。

情况一::如果这是您的标准登录表格。无论如何关闭它可能都是不好的。如果您确实需要这样做,请认真考虑。用户习惯于浏览器记住并存储密码。在大多数情况下,您不应更改该标准行为。

如果您仍然想要这样做,请参见案例III

情况二::这不是您的常规登录表单,但输入的nameid属性不是“喜欢”电子邮件,登录名,用户名,用户名,密码

使用

<input type="text" name="yoda" autocomplete="off">

情况III::这不是您的常规登录表单,但输入的nameid属性是“喜欢”电子邮件,登录名,用户名,用户名,密码。

例如: 登录名,abc_login,密码,some_password,password_field。

所有浏览器都具有密码管理功能,可记住这些密码或建议使用更强的密码。他们就是这样做的。

但是,假设您是站点的管理员,并且可以创建用户并设置其密码。在这种情况下,您不希望浏览器提供这些功能。

在这种情况下,autocomplete="off"将不起作用。使用autocomplete="new-password"

<input type="text" name="yoda" autocomplete="new-password">

有用的链接:

  1. https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

答案 52 :(得分:2)

我使用以下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();

答案 53 :(得分:2)

我能够通过添加两个假输入并将它们置于绝对位置来阻止Chrome 66自动填充:

<form style="position: relative">
  <div style="position: absolute; top: -999px; left: -999px;">
    <input name="username" type="text" />
    <input name="password" type="password" />
  </div>
  <input name="username" type="text" />
  <input name="password" type="password" />

首先,我尝试将display:none;添加到输入中,但Chrome会忽略它们并自动填充可见的内容。

答案 54 :(得分:2)

解决方法是在用户想要更改密码之前不将密码字段插入DOM。这可能适用于某些情况:

在我们的系统中,我们在管理页面中有一个密码字段,因此我们必须避免无意中设置其他用户的密码。该表单有一个额外的复选框,可以根据这个原因切换密码字段的可见性。

因此,在这种情况下,来自密码管理器的自动填充会成为双重问题,因为用户甚至看不到输入。

解决方案是让复选框触发密码字段是否插入DOM,而不仅仅是其可见性。

AngularJS的伪实现:

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

答案 55 :(得分:2)

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

答案 56 :(得分:2)

您可以在输入控件中使用autocomplete = off以避免自动完成

例如:

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

如果上述代码不起作用,那么也尝试添加这些属性

autocapitalize="off" autocomplete="off"

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

答案 57 :(得分:2)

我想澄清一下,这个答案是为了完整性和社区知识,绝不是建议。

对于Internet Explorer 11,有一个可用于阻止自动完成的安全功能。它的工作原理如下:

在用户输入后,在JavaScript中修改的任何表单输入值都被标记为不符合自动完成的条件。

此功能通常用于保护用户免受在您输入密码后想要更改密码的恶意网站的侵害。

但是,您可以在密码字符串的开头插入一个特殊字符来阻止自动完成。可以在管道下方检测并删除此特殊字符。

答案 58 :(得分:1)

最后我得到了一个解决方案 首先添加2个隐藏文本字段

只需添加像这样的角度指令

 (function () {

    'use strict';

    appname.directive('changePasswordType', directive);

    directive.$inject = ['$timeout', '$rootScope',  '$cookies'];

    function directive($timeout,  $rootScope, $cookies) {
        var directive = {
            link: link,
            restrict: 'A'
        };

        return directive;

        function link(scope,element) {
            var process = function () {
                var elem =element[0];
                elem.value.length > 0 ? element[0].setAttribute("type", "password") :
                element[0].setAttribute("type", "text");
            }

            element.bind('input', function () {
                process();
            });

            element.bind('keyup', function () {
                process();
            });
        }
    }
})()

然后在您需要阻止自动完成的文本字段中使用它

    <input type="text" style="display:none">\\can avoid this 2 lines
    <input type="password" style="display:none">
    <input type="text"  autocomplete="new-password" change-password-type>

注意:别忘了包含jquery,最初设置type ="text"

答案 59 :(得分:1)

我今天发现的所有解决方案都无法带来真正的有效响应。

具有autocomplete属性的解决方案不起作用。

所以,这就是我为自己写的:

<input type="text" name="UserName" onkeyup="if (this.value.length > 0) this.setAttribute('type', 'password'); else this.setAttribute('type', 'text');" >

您应该对页面上希望用作密码类型的每个输入字段执行此操作。

这可行。

欢呼

答案 60 :(得分:1)

截至2019年12月:

在回答这个问题之前,我先在SO和不同的论坛上尝试了几乎所有答案,但是找不到适合所有现代浏览器和IE11的解决方案。

所以这是我找到的解决方案,我相信本文中尚未讨论或提及。

根据Mozilla Dev Network(MDN)关于how to turn off form autocomplete

的帖子
  

默认情况下,浏览器会记住用户通过网站上的字段提交的信息。这使浏览器可以提供自动完成功能(即,建议用户已开始键入的字段的可能完成内容)或自动填充(即,在加载时预先填充某些字段)

在同一篇文章中,他们讨论了autocmplete属性的用法及其局限性。众所周知,并不是所有的浏览器都可以按照我们的意愿使用此属性。

解决方案

因此,在本文结尾处,他们共享了一种适用于所有浏览器(包括IE11 + Edge)的解决方案。基本上,它是完成此操作的jQuery插件。 这是jQuery插件的link及其工作方式。

代码段:

$(document).ready(function () {        
    $('#frmLogin').disableAutoFill({
        passwordField: '.password'
    });
});

在HTML中需要注意的一点是密码字段是文本类型,并且password类用于标识该字段:

<input id="Password" name="Password" type="text" class="form-control password">

希望这会对某人有所帮助。

答案 61 :(得分:1)

在Chrome中,对于密码类型输入,autocomplete="new-password"是唯一适用于我的东西。

答案 62 :(得分:1)

我已经在这里发布了一个解决方案:https://stackoverflow.com/a/60664102/5117084

解决方法是将自动完成属性设置为“cc-csc”,该值是信用卡的 CVC,不允许他们存储它! (暂时……)

autocomplete="cc-csc"

答案 63 :(得分:1)

<块引用>

[2021 年适用于 Chrome(v88、89、90)、Firefox、Brave、Safari]

这里已经写的旧答案可以反复试验,但大多数 他们没有链接到任何官方文档或 Chrome 对此的看法 很重要。

问题中提到的问题是因为 Chrome 的自动填充功能,这里是 Chrome 在此错误链接中对此的立场 - https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164

简单来说,有两种情况-

  • [CASE 1]:您的 input 类型不是 password。在这种情况下,解决方案很简单,分为三个步骤。

  • name 属性添加到 input

  • name 不应以电子邮件或用户名等值开头,否则 Chrome 最终仍会显示下拉列表。例如,name="emailToDelete" 显示下拉菜单,但 name="to-delete-email" 不显示。同样适用于 autocomplete 属性。

  • 添加autocomplete属性,并添加一个对你有意义的值,比如new-field-name

它看起来像这样,您将在余生中再也看不到此输入的自动填充 -

  <input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
  • [案例 2]input typepassword
  • 好吧,在这种情况下,无论您尝试过多少次,Chrome 都会向您显示用于管理密码/使用现有密码的下拉菜单。 Firefox 也会做类似的事情,所有其他主要浏览器也是如此。 [1]
  • 在这种情况下,如果您真的想阻止用户查看管理密码的下拉菜单/查看安全生成的密码,您将不得不使用 JS 来切换输入类型,如本文的其他答案中所述问题。

[1] 关于关闭自动补全的详细 MDN 文档 - https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

答案 64 :(得分:1)

每次只需将 name 元素中的 input 属性更改为唯一,它就再也不会自动完成了!

一个例子可能是在最后添加了一个时间标记。您的服务器只需要解析文本 name 的第一部分即可检索该值。

<input type="password" name="password_{DateTime.Now.Ticks}" value="" />

答案 65 :(得分:1)

所提供的答案都不适用于我测试过的所有浏览器。基于已经提供的答案,这是我最终在 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>

答案 66 :(得分:1)

这对我来说就像一个魅力。

  1. 将表单的自动完成属性设置为关闭
  2. 添加一个虚拟输入字段并将其属性也设置为off。
<form autocomplete="off">
 <input type="text" autocomplete="off" style="display:none">
</form>

答案 67 :(得分:1)

固定。只需要添加上面的实际输入字段

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion - MDN https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908 - 中等                                         在EDGE,Chrome(最新v63),Firefox Quantum(57.0.4 64-бит),Firefox(52.2.0)上测试                                         假字段是chrome / opera自动填充错误字段的解决方法

 const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}

 <input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />

<TextField
  name='userName'
  autoComplete='nope'
  ... 
/>

<TextField
      name='password'
      autoComplete='new-password'
      ... 
    />

答案 68 :(得分:1)

您还可以使用 代替输入来跳过自动完成部分。

答案 69 :(得分:0)

Chrome 不断尝试强制自动完成。因此,您需要做一些事情。

输入字段的属性 idname 不需要是不可识别的。所以没有姓名、电话、地址等值。

相邻的标签或 div 也需要无法识别。但是,您可能想知道,用户如何知道?好吧,您可以使用 ::aftercontent 做一个有趣的小技巧。您可以将其设置为字母。

<label>Ph<span class='o'></span>ne</label>
<input id='phnbr' name='phnbr' type='text'>

<style>
  span.o {
    content: 'o';
  }
</style>

答案 70 :(得分:0)

尝试了所有解决方案后(有的部分解决了问题,禁用了自动填充功能,但没有完成自动填充,有的根本没有效果),我发现截至2020年最好的解决方案是添加type =“ search”和autocomplete =“ off”到您的输入元素。像这样:

<input type="search" /> or <input type="search" autocomplete="off" />

还要确保在表单元素上具有autocomplete =“ off”。 效果很好,并且禁用了自动填充和自动填充功能。

此外,如果您使用的是type =“ email”或任何其他文本类型,则需要添加autocomplete =“ new-email”,这将完全禁用这两种功能。 type =“ password”也是如此。只需在类型自动添加到自动填充的前缀。 像这样:

<input type="email" autocomplete="new-email" />
<input type="password" autocomplete="new-password" />

答案 71 :(得分:0)

  1. 保留具有文本类型和隐藏的输入。
  2. 在DOMContentLoaded上,调用一个更改密码类型并显示字段的函数,延迟为1s。

document.addEventListener('DOMContentLoaded', changeInputsType);

function changeInputsType() {
    setTimeout(function() {
        $(/*selector*/).prop("type", "password").show();
    }, 1000);
}

答案 72 :(得分:0)

在使用自己的解决方案之前,我必须花两天时间进行讨论:

首先,如果它适用于任务,请抛开[ [], [] ] 并使用input。据我所知,textarea中没有自动填充/自动完成功能,这对于我们要实现的目标来说是一个很好的开始。现在,您只需要更改该元素的某些默认行为即可使其像textarea一样起作用。

接下来,您需要将所有长条目都保留在同一行上,例如input,并且希望input用光标在y轴上滚动。我们还希望摆脱大小调整框,因为我们正在尽力模仿textarea的行为,该行为没有调整大小句柄。我们使用一些快速的CSS实现了所有这些目标:

input

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

#your-textarea {
  resize: none;
  overflow-y: hidden;
  white-space: nowrap;
}

轻松自在。此解决方案的自动填充问题为零。

答案 73 :(得分:0)

可以肯定,这是迄今为止最通用的解决方案

这将停止自动完成,并且弹出建议框也将停止。

简介

面对现实,autocomplete = off或new-password似乎无效。 它应该做,但是没有做,每周我们发现其他事情已经改变,浏览器正在用不需要的更多随机垃圾填充表单。我发现了一个非常简单的解决方案,不需要在登录页面上自动完成。

如何实施

步骤1)。将相同的函数调用添加到用户名和密码字段的onmousedown和onkeyup属性中,确保为它们提供一个ID并在函数调用结束时记下代码。 md = mousedown和ku = keyup

对于用户名字段,仅添加一个&nbsp;值,因为这样可以防止表单在进入页面时自动填充。

例如:

<input type="text" value="&nbsp;" id="myusername" onmousedown="protectMe(this,'md')" onkeyup="protectMe(this,'ku')" />

步骤2)。在页面上包含此功能

function protectMe(el,action){

 // Remove the white space we injected on startup
 var v = el.value.trim();
 
// Ignore this reset process if we are typing content in
// and only acknowledge a keypress when it's the last Delete
// we do resulting in the form value being empty
 if(action=='ku' && v != ''){return;} 

// Fix double quote issue (in the form input) that results from writing the outerHTML back to itself
  v = v.replace(/"/g,'\\"'); 
  
  // Reset the popup appearing when the form came into focus from a click  by rewriting it back
  el.outerHTML=el.outerHTML; 

  // Issue instruction to refocus it again, insert the value that existed before we reset it and then select the content.
  setTimeout("var d=document.getElementById('"+el.id+"'); d.value=\""+v+"\";d.focus();if(d.value.length>1){d.select();}",100);
}

它做什么?

  • 首先,它将&nbsp;空格添加到该字段,以便浏览器尝试 查找与此相关的详细信息,但未找到任何内容,因此 自动完成固定
  • 第二,当您单击时,将再次创建HTML,取消弹出窗口,然后将值重新添加回选定的位置。
  • 最后,当您使用“删除”按钮删除字符串时,弹出窗口通常通常会再次出现,但如果击中该点,则键入检查会重复该过程。

出了什么问题?

  • 单击以选择字符是一个问题,但是对于登录页面,大多数情况会原谅它选择了所有文本
  • JavaScript确实会修剪空格的所有输入,但为了安全起见,您可能也希望在服务器端这样做

可以更好吗?

可能是。这只是我测试过的东西,可以满足我的基本需求,但是可能会添加更多技巧或应用所有这些方式的更好方法。

经过测试的浏览器

自发布之日起已测试并可以在最新的Chrome,Firefox,Edge上使用

答案 74 :(得分:0)

<input type="text" name="attendees" id="autocomplete-custom-append">

<script>
  /* AUTOCOMPLETE */

  function init_autocomplete() {

    if (typeof ($.fn.autocomplete) === 'undefined') {
      return;
    }
    // console.log('init_autocomplete');

    var attendees = {
      1: "Shedrack Godson",
      2: "Hellen Thobias Mgeni",
      3: "Gerald Sanga",
      4: "Tabitha Godson",
      5: "Neema Oscar Mracha"
    };

    var countriesArray = $.map(countries, function (value, key) {
      return {
        value: value,
        data: key
      };
    });

    // initialize autocomplete with custom appendTo
    $('#autocomplete-custom-append').autocomplete({
      lookup: countriesArray
    });

  };
</script>

答案 75 :(得分:0)

与Chrome 84.0.4147.105兼容

1。将文本类型分配给密码字段并添加一个类别,例如“ fakepasswordtype”

<input type="text" class="fakepasswordtype" name="password1">
<input type="text" class="fakepasswordtype" name="password2">

2。然后,使用jQuery在首次输入后立即将类型更改回密码

jQuery(document).ready(function($) {
    $('.fakepasswordtype').on('input', function(e){
        $(this).prop('type', 'password');
    });
});

这阻止了Chrome自动填充的令人讨厌的丑陋行为。

答案 76 :(得分:0)

多年来,我一直在努力实现自动完成。我尝试了每一个建议,但对我没有任何帮助。 通过jQuery 2添加属性效果很好:

$(document).ready( function () {
    setTimeout(function() {
        $('input').attr('autocomplete', 'off').attr('autocorrect', 'off');
    }, 10);
}); 

将产生HTML

<input id="start_date" name="start_date" type="text" value="" class="input-small hasDatepicker" autocomplete="off" placeholder="Start date" autocorrect="off">

答案 77 :(得分:0)

当我自己尝试时,情况发生了变化,旧的答案不再有效。

我确信它会起作用的实施。我在 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"

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

答案 78 :(得分:0)

只需输入autocomplete="off" list="autocompleteOff"即可完成IE / Edge的工作!对于Chrome,添加autocomplete="new password"

答案 79 :(得分:0)

自动填充功能无需选择该字段即可更改该值。我们可以在状态管理中使用它来忽略select事件之前的状态更改。

React中的示例:

import React, {Component} from 'react';

class NoAutoFillInput extends Component{

    constructor() {
        super();
        this.state = {
            locked: true
        }
    }

    onChange(event){
        if (!this.state.locked){
            this.props.onChange(event.target.value);
        }
    }

    render() {
        let props = {...this.props, ...{onChange: this.onChange.bind(this)}, ...{onSelect: () => this.setState({locked: false})}};
        return <input {...props}/>;
    }
}

export default NoAutoFillInput;

如果浏览器尝试填充该字段,则该元素仍处于锁定状态,并且状态不受影响。现在,您可以使用NoAutoFillInput组件替换输入字段以防止自动填充:

<div className="form-group row">
    <div className="col-sm-2">
        <NoAutoFillInput type="text" name="myUserName" className="form-control" placeholder="Username" value={this.state.userName} onChange={value => this.setState({userName: value})}/>
    </div>
    <div className="col-sm-2">
        <NoAutoFillInput type="password" name="myPassword" className="form-control" placeholder="Password" value={this.state.password} onChange={value => this.setState({password: value})}/>
    </div>
</div>

当然,这个想法也可以与其他JS框架一起使用。

答案 80 :(得分:0)

只需尝试将值为“ off”的属性自动完成功能输入输入类型。

<input type="password" autocomplete="off" name="password" id="password" />

答案 81 :(得分:0)

我几乎回答了所有答案,但是新版本的Chrome很聪明;如果您写

autocomplete="randomstring" or autocomplete="rutjfkde"

它会自动将其转换为

autocomplete="off"

当输入控件获得焦点时。

因此,我是使用jQuery完成的,我的解决方案如下。

$("input[type=text], input[type=number], input[type=email], input[type=password]").focus(function (e) {
    $(this).attr("autocomplete", "new-password");
})

这是最简单的方法,它将对您在表单上拥有的任何数量的控件都起作用。希望对社区有所帮助。

答案 82 :(得分:0)

我的jQuery解决方案。 它可能不是100%可靠的,但对我有用。 在代码注释中描述了这个想法。

func babyScaleManagerScanDevices(_ babyScaleDevices: [ELBabyScaleDeviceModel]?) {
let devices = babyScaleDevices as NSArray
guard let device = devices.firstObject else {
    print("Error unwrapping first device")
    return
}
print("Device: \(String(describing: device))")
    /**
 * Prevent fields autofill for fields.
 * When focusing on a text field with autocomplete (with values: "off", "none", "false") we replace the value with a new and unique one (here it is - "off-forced-[TIMESTAMP]"),
 * the browser does not find this type of autocomplete in the saved values and does not offer options.
 * Then, to prevent the entered text from being saved in the browser for a our new unique autocomplete, we replace it with the one set earlier when the field loses focus or when user press Enter key.
 * @type {{init: *}}
 */
var PreventFieldsAutofill = (function () {
    function init () {
        events.onPageStart();
    }

    var events = {
        onPageStart: function () {
            $(document).on('focus', 'input[autocomplete="off"], input[autocomplete="none"], input[autocomplete="false"]', function () {
                methods.replaceAttrs($(this));
            });
            $(document).on('blur', 'input[data-prev-autocomplete]', function () {
                methods.returnAttrs($(this));
            });
            $(document).on('keydown', 'input[data-prev-autocomplete]', function (event) {
                if (event.keyCode == 13 || event.which == 13) {
                    methods.returnAttrs($(this));
                }
            });
            $(document).on('submit', 'form', function () {
                $(this).find('input[data-prev-autocomplete]').each(function () {
                    methods.returnAttrs($(this));
                });
            });
        }
    };

    var methods = {
        /**
         * Replace value of autocomplete and name attribute for unique and save the original value to new data attributes
         * @param $input
         */
        replaceAttrs: function ($input) {
            var randomString = 'off-forced-' + Date.now();
            $input.attr('data-prev-autocomplete', $input.attr('autocomplete'));
            $input.attr('autocomplete', randomString);
            if ($input.attr('name')) {
                $input.attr('data-prev-name', $input.attr('name'));
                $input.attr('name', randomString);
            }
        },
        /**
         * Restore original autocomplete and name value for prevent saving text in browser for unique value
         * @param $input
         */
        returnAttrs: function ($input) {
            $input.attr('autocomplete', $input.attr('data-prev-autocomplete'));
            $input.removeAttr('data-prev-autocomplete');
            if ($input.attr('data-prev-name')) {
                $input.attr('name', $input.attr('data-prev-name'));
                $input.removeAttr('data-prev-name');
            }
        }
    };

    return {
        init: init
    }
})();
PreventFieldsAutofill.init();
.input {
  display: block;
  width: 90%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

答案 83 :(得分:0)

最简单的答案是

<input autocomplete="on|off">

但是请记住浏览器支持。当前,

支持autocomplete属性

Chrome 17.0及最新版本 IE 5.0及最新版本
Firefox 4.0及最新版本
Safari 5.2和最新版本
Opera 9.6及最新版本

答案 84 :(得分:0)

我遇到了同样的问题,今天是09/10/2019我发现的唯一解决方案是这个

将autocomplete =“ off”添加到表单标签。

打开表单标签后输入1个错误的输入。

<input id="username" style="display:none" type="text" name="fakeusernameremembered">

但是在密码类型字段上不起作用,请尝试

<input type="text" oninput="turnOnPasswordStyle()" placeholder="Enter Password" name="password" id="password" required>

关于脚本

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

这已在Chrome-78,IE-44,Firefox-69上进行了测试

答案 85 :(得分:0)

我解决了在页面加载后放置此代码的问题:

<script>
var randomicAtomic = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  $('input[type=text]').attr('autocomplete',randomicAtomic);
</script>

答案 86 :(得分:0)

不幸的是,此选项已在大多数浏览器中删除,因此无法禁用密码提示,直到今天我仍未找到解决此问题的好方法,我们现在剩下的就是希望这一天选项会回来。

答案 87 :(得分:0)

  

轻松破解

将输入设为只读

<input type="text" name="name" readonly="readonly">

在超时后删除只读

$(function() {
        setTimeout(function() {
            $('input[name="name"]').prop('readonly', false);
        }, 50);
    });

答案 88 :(得分:0)

大多数答案都无济于事,因为浏览器只是忽略了它们。 (其中一些与跨浏览器不兼容)。对我有用的解决方法是:

<form autocomplete="off">
    <input type="text" autocomplete="new-password" />
    <input type="password" autocomplete="new-password" />
</form>

我在表单标签上设置了autofill =“ off”,并在不需要自动填充的地方设置了autofill =“ new-password”。

答案 89 :(得分:0)

您可以在属性name中添加名称email的地址格式并生成电子邮件值,例如:

<form id="something-form">
  <input style="display: none" name="email" value="randomgeneratevalue"></input>
  <input type="password">
</form>

如果使用此方法,则Chrome浏览器无法插入自动填充密码。

答案 90 :(得分:-1)

为避免自动完成,请将autocomplete =“ off”添加到html输入属性。 例:

答案 91 :(得分:-23)

为什么要让用户的生活不那么方便?

“不应保存密码/信用卡数据等”是一个不好的论点:启用自动完成功能后,Mac OS X中的浏览器会将这些值存储在具有每个应用程序权限的加密数据库中。相反,autocomplete=off的现实效果是什么?用户将在未加密的文本文件中编写它,或者更好的是,将其写在屏幕上的便利贴上。

好的东西就像Antti提到的那样,以及patches to make the engine ignore the attribute altogether

说真的,我建议你重新考虑使用这个属性。 让任何人受益。