首页 / 知识

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

2023-04-11 16:40:00

How do you disable browser Autocomplete on web form field / input tag?

对于特定的input或form field，如何在主要浏览器中禁用autocomplete？

30 autocomplete="off"忽视Firefox的密码的提示，选择两个用户的密码，而不是是否应该可存储在客户端。注意下面的评论从2014年：5月，

  • 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开发者使用的表单元素的属性autocomplete防止数据被从cached在老年browsers。

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

在两个autocomplete=off之外，你可能也有你的字段名是随机的，generates的代码页，也许一些城市综合会议的特异性比两个字符串的名称。

当submitted形状的冰淇淋，你可以带我方处理断之前，他们在服务器端。这是我的目标是从Web浏览器的测距范围为你的鸭场也可能帮助预防xsrf攻击，因为安attacker不会能够代表我想一场名为"形式提交。

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

为什么？许多银行和其他"高安全性"网站为了安全目的在登录页面添加了autocomplete=off，但这实际上降低了安全性，因为这会导致人们更改这些高安全性网站上的密码，使其易于记忆(从而破解)，因为自动完成功能被破坏。

很久以前，大多数密码管理器开始忽略autocomplete=off，现在浏览器开始只对用户名/密码输入进行同样的操作。

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

Web开发人员要做什么？

  • 如果您可以将所有密码字段单独保存在一个页面上，这是一个很好的开始，因为似乎密码字段的存在是用户/密码自动完成启动的主要触发器。否则，请阅读下面的提示。
  • Safari注意到有两个密码字段，并在这种情况下禁用自动完成功能，假定它必须是更改密码表单，而不是登录表单。因此，只要确保在允许的任何表单中使用2个密码字段(新建和确认新建)。

  • 不幸的是，Chrome34每次看到密码字段时，都会尝试用user/pass自动填充字段。这是一个非常糟糕的错误，希望他们能改变狩猎行为。但是，将此项添加到表单顶部似乎会禁用密码自动填充：

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

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

有时，即使autocomplete=off也不会阻止将凭证填充到错误的字段中，但不会阻止用户或昵称字段。

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

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

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

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

1
2
3
4
<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中密码字段之前。因为浏览器是最后一个实例，您不能控制它，

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

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

这将工作在IE和Mozilla的Firefox，它下方的冰，冰槽的XHTML标准。

chrome的解决方案是将autocomplete="new-password"添加到输入类型密码中。

例子：

1
2
3
4
5
<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确保更改生效，浏览器多次将页面保存在缓存中，这给了我一个坏印象，认为它不起作用，但浏览器实际上没有带来更改。

"有人说，答案autocomplete="off"冰

然而，我认为它的价值说明为什么它的一个很好的想法，这两个使用在某些用例作为一些回答两个问题需要复制，这与它的suggested最好不要打开它关闭。

信用卡堵browsers储存数不应该是左两个用户。太多的用户甚至不会意识到这是一个问题。

它的特别重要的把它断开田信用卡安全码。本页为美国：

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

冰的问题，如果它的一个公共计算机(网络咖啡馆，图书馆等)，它的那么容易为其他用户窃取你的两个卡和细节，甚至在你自己的机器一个恶意网站窃取的数据可以自动完成。

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

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

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

三种选择：第一：

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

第二：

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

第三个(javascript代码)：

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

我已经通过使用随机字符解决了与谷歌Chrome的无休止的斗争。当您总是用随机字符串呈现自动完成时，它将永远不会记住任何内容。

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

希望对别人有帮助。

在一个相关。事实上，在对面的完全记录

"If you're the user of the aforementioned form and want to re-enable
the autocomplete functionality, use the 'remember password'
bookmarklet from this bookmarklets
page. It removes
all autocomplete="off" attributes from all forms on the page. Keep
fighting the good fight!"

我看到autocomplete="off"。有一个很好的理由：因为你想要做的是提供你自己的自动完成功能性！

事实上我们做得使用sasB的一点想法。这是一个Web应用程序的两个医学软件运行一个医生的办公室。然而，我们的客户多是世界卫生组织的外科用很多不同的workstations，包括半公共的终端。所以，他们想确保这是一个医生不理解《大学implication自动保存了密码或不支付注意不能让他们意外的登录信息很容易访问。当然，这是之前的想法(这是私人浏览功能的启动是在IE8，ff3.1等。即使如此，许多医生都被迫使用旧的学校在医院的browsers用它，不会改变。

所以，我们只是"Generate登录页的随机场的名字，这是我唯一的工作岗位。是的，它的convenient较少，但这只是hitting头，在《关于用户的登录信息储存槽对公共终端。

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

代替autocomplete="off"，只需简单地使用autocomplete="false"。

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

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

我最终找到了一个不需要JavaScript的纯HTML解决方案，它可以在现代浏览器中工作(除了IE；必须至少有一个catch，对吗？)，并且不要求您禁用整个表单的自动完成功能。

只需关闭form上的自动完成功能，然后为希望在表单中工作的任何input打开它。例如：

1
2
3
4
5
6
7
8
9
<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>

我认为HTML5支持autocomplete=off。

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

它对用户来说不太方便，在OSX中甚至不存在安全问题(下面由Soren提到)。如果你担心人们的密码被远程窃取——即使你的应用程序使用autcomplete=off，键盘记录器仍然可以做到这一点。

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

我是一个非标准的方式这样做(我认为火狐和IE还支持它)，但铜与用户期望的是一个理想的要求。

如果用户enters他们的信用卡资料，然后在一种轻松的别人你使用的浏览器，这不是你的问题。：)

这对我有用。

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

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

最佳解决方案：

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

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

阻止自动完成字段：

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

说明：autocomplete在中继续工作，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

尝试添加

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

除了

autocomplete="off"

对于您不想记住表单数据的输入(username、password等)，如下所示：

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

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

< BR>更新：下面是基于这种方法的完整示例，它可以防止拖放、复制、粘贴等操作。

1
2
3
4
5
6
7
8
<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等，工作正常。希望这有帮助…

比赛有点晚了……但是我遇到了这个问题，尝试了几次失败，但是这个在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 :

1
autocomplete="nope"

添加

autocomplete="off"

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

测试：

  • 火狐3.5，4测试版
  • Internet Explorer 8
  • 铬

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

1
2
3
4
5
<input type="text" class="noAutoComplete" ... />

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

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

使用一个非标准的名称和ID字段，所以"name"而不是"_ name"。browsers则不会看到它的名称为"场"。最好的冰淇淋的人吗？你可以做这样一些但不是所有的字段，它将自动完成一些但不是所有的领域。

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

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

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

1
2
  Username <input type="text" name="fake_safari_username">
  Password <input type="password" name="fake_safari_password">

希望对某人有用！

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

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

1
2
3
4
5
6
<? $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变量，如下所示：

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

该值可以像往常一样访问

1
var_dump($_POST['username']);

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

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

如果只是autocomplete="off"不起作用，也可以尝试这些方法：

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

所以这里是：

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

这里提到的黑客没有一个对我有用。这里有一个关于这个问题的讨论：https://code.google.com/p/chromium/issue s/detail？ID＝468153×C41

在

工程中添加此项(至少目前如此)：

1
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />

您可以在输入中使用。

例如；

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

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

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

许多现代浏览器不再支持登录字段的autocomplete="off"。autocomplete="new-password"是wokring，更多信息mdn文档

没有假输入，没有javascript！

无法在浏览器中一致禁用自动填充。我尝试过所有不同的建议，但这些建议在所有浏览器中都不起作用。唯一的方法是根本不使用密码输入。我想到的是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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来防止。

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

Chrome计划支持这一点。

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

Chrome讨论

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

要与Firefox兼容，请使用普通自动完成功能='off'

1
<input type='search' name="whatever" autocomplete='off' />
1
2
3
4
5
6
7
8
9
10
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        try {
            $("input[type='text']").each(function(){
                           $(this).attr("autocomplete","off");
                        });
        }
        catch (e)
        { }
    });

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

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

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

如果您的问题是有一个自动完成的密码字段，那么您可能会发现这很有用…

在我们的网站的几个领域中，我们遇到了这个问题，在这些领域中，业务部门希望重新查询用户的用户名和密码，特别是出于合同原因，不希望密码自动填充工作。我们发现，最简单的方法是输入一个假密码字段供浏览器查找和填充，而真正的密码字段保持不变。

1
2
3
4
<!-- 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" />

注意，在火狐和IE中，只要把输入的任何类型的密码放在实际密码之前就足够了，但是Chrome看穿了这一点，并强迫我实际命名假密码输入(通过给它一个明显的密码ID)，让它"咬"。我使用了一个类来实现样式，而不是使用嵌入的样式，因此如果上面的样式由于某种原因不起作用，请尝试这样做。

google chrome会忽略某些输入的autocomplete="off"属性，包括密码输入和名称检测到的公共输入。

例如，如果您输入的名称为address，那么chrome将根据在其他站点输入的地址提供自动填充建议，即使您告诉它不要：

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

如果不希望chrome这样做，则可以重命名或命名表单字段的名称：

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

如果您不介意自动完成之前在您的网站上输入的值，那么您可以保持自动完成功能处于启用状态。名称间距字段名应足以防止显示从其他网站记住的值。

1
<input type="string" name="mysite_addr" autocomplete="on">

我使用这个TextMode="password" autocomplete="new-password"和aspx txtPassword.Attributes.Add("value", '');中的页内加载。

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

  • 按浏览器标签

  • 按码

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

    To dissable in browse go to the setting

    • Go to advance setting and uncheck the checkbox and then Restore.

    转到高级设置，取消选中复选框，然后还原。

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

    1
    </asp:TextBox>

    通过设置EDOCX1[1]表格：

    1
    </asp:TextBox>

    通过设置EDOCX1[1]表格：

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

    使用.cs页面中的代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    protected void Page_Load(object sender, EventArgs e)  
        {  
        if(!Page.IsPostBack)  
        {  


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

        }  
    }

    通过使用jQuery

    1
    2
    3
    4
    5
    6
    7
    8
    head runat="server">  
     
    <script src="Scripts/jquery-1.6.4.min.js">  
    <script type="text/javascript">  
        $(document).ready(function () {  
            $('#txt_userid').attr('autocomplete', 'off');  

        });

    我的问题主要是用Chrome自动填充，但我认为这可能比自动完成更麻烦。

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

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

    我知道这是一篇老文章，但重要的是要知道firefox(我认为只有firefox)使用了一个名为ismxfilled的值，它基本上强制自动完成。

    ismxfilled="0"用于OFF。

    或

    ismxfilled="1"用于ON。

    为了解决这个问题，我使用了一些CSS技巧，下面的方法对我很有用。

    1
    2
    3
    4
    5
    input {
        text-security:disc;
        -webkit-text-security:disc;
        -mox-text-security:disc;
    }

    请阅读本文了解更多详细信息。

    如果要防止通用浏览器插件LastPass自动填充字段，也可以在该线程的其他建议中添加属性data-lpignore="true"。请注意，这不仅适用于密码字段。

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

    不久前，我也在尝试做同样的事情，但由于我发现所有的建议都不适合我，所以我很困惑。原来是LastPass。

    可以说，我想要一个完全脱离浏览器控制的东西。在这个例子中，有一个标准的文本输入字段来获取密码-没有电子邮件、用户名等…

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

    有一个名为"input"的变量，设置为空字符串…

    1
    var input ="";

    现场事件由jquery监控…

  • 对焦时，字段内容和相关的"输入"变量始终被清除。
  • 在按键上，任何字母数字字符以及一些定义的符号都会附加到"输入"变量中，字段输入将替换为项目符号。此外，当按下Enter键时，键入的字符(存储在"input"变量中)将通过Ajax发送到服务器。(请参阅下面的"服务器详细信息"。)
  • 在keyup中，home、end和arrow键会导致刷新"input"变量和字段值。(我可能对箭头导航和焦点事件产生了幻想，并使用了。selections开始计算用户单击或导航的位置，但对于密码字段来说，这并不值得付出努力。)此外，按backspace键会相应地截断变量和字段内容。
    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    $("#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，服务器将生成一个具有10分钟寿命的cookie，它还存储了两个与时间框架和IP相对应的加扰值。
    • 当页面重新加载时，服务器会找到cookie并验证加扰值是正确的(即时间帧与cookie的日期对应，IP相同)。
    • 每次用户与服务器交互时，都会重复验证和更新cookie的过程，无论他们是登录、显示数据还是更新记录。
    • 如果cookie的值始终正确，服务器将显示完整的网站(如果用户正在登录)，或者满足提交的任何显示或更新请求。
    • 如果在任何时候cookie的值不正确，服务器会删除当前cookie，然后在重新加载时，会导致登录页重新显示。

    要防止浏览器自动填充用户保存的站点登录凭据，请在表单顶部放置一个文本和密码输入字段，其中非空值和样式"position:absolute；top:-999px；left:-999px"设置为隐藏这些字段。

    1
    2
    3
    4
    5
    <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>

    在密码字段之前必须有一个文本字段。否则，在某些情况下可能无法阻止自动填充。

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

    重要的是，这两个字段位于表单中的"真实"密码类型字段之前。

    对于符合HTML5.3的新浏览器，autocomplete属性值"new password"应该有效。

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <form>
     
        <input type="text" readonly tabindex="-1" />
        <input type="password" readonly tabindex="-1" />
     
      <!-- Place the form elements below here. -->
      <input type="text" name="username" value="" />
      <input type="password" name="password" value="" autocomplete="new-password" />
    </form>

    如果从javascript动态设置autocomplete="off"，safari不会改变对自动完成的看法。但是，如果您在每个字段的基础上这样做，它将得到尊重。

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

    试试这个：

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

    如果不使用客户端和服务器端代码的组合，似乎不可能实现这一点。

    为了确保用户每次在没有自动完成的情况下都必须填写表单，我使用以下技术：

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

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

    • 下面是一个小提琴，演示了2 https://jsfiddle.net/xnbxbpv4中描述的javascript、css和HTML。/

    JavaScript：

    1
    2
    3
    $(document).ready(function() {
        $(".disable-input").attr("disabled","disabled");
    });

    CSS：

    1
    2
    3
    .disable-input {
      display: none;
    }

    HTML：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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">

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

    <input type="submit" value="submit">
    </form>

    下面是一个粗略的例子，说明使用Ra剃刀的ASP.NET服务器代码将有助于1

    模型：

    1
    2
    3
    4
    5
    public class FormModel
    {
        public string Username { get; set; }
        public string Password { get; set; }
    }

    控制器：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    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);
        }
    }

    观点：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    @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">
       
        <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">
       
        <input type="submit" value="submit">
    }

    我通过添加两个假输入并给它们绝对位置来阻止Chrome66自动填充：

    1
    2
    3
    4
    5
    6
    7
    <form style="position: relative">
     
        <input name="username" type="text" />
        <input name="password" type="password" />
     
      <input name="username" type="text" />
      <input name="password" type="password" />

    起初，我尝试将display:none;添加到输入中，但chrome忽略了这些输入，并自动填充了可见的输入。

    我使用以下jquery代码段：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 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();。

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

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

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

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

    AngularJS的伪实现：

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

    我想澄清一下，这个答案是为了完整性，并且为了社区知识，不建议这样做。

    关于Internet Explorer 11，有一个安全功能可以用来阻止自动完成。工作原理如下：

    任何在用户输入后在javascript中修改的表单输入值都将被标记为不符合自动完成要求。

    此功能通常用于保护用户免受恶意网站的攻击，这些网站在您输入密码或类似密码后希望更改您的密码。

    但是，您可以在密码字符串的开头插入一个特殊字符来阻止自动完成。这个特殊的字符可以在以后的管道中检测到并删除。

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

    例如：

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

    如果上面的代码不起作用，那么也尝试添加这些属性。

    1
    autocapitalize="off" autocomplete="off"

    或

    将输入类型属性更改为EDCOX1×0。谷歌不将自动填充应用到具有某种搜索类型的输入。

    autocomplete='off'对我不起作用，无论如何，我将输入字段的value属性设置为一个空格，即，它将默认输入字符设置为一个空格，由于用户名为空，密码也被清除。

    我终于找到了解决办法首先添加2个隐藏文本字段

    只需添加一个这样的角指令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
     (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();
                });
            }
        }
    })()

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

    1
    2
    3
        <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"。

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

    所提供的所有答案在我测试的所有浏览器上都不起作用。基于已经提供的答案，这是我最终在Chrome61、MicrosoftEdge 40(EdgeHTML 15)、IE 11、Firefox 57、Opera 49和Safari 5.1上测试的结果。由于多次试验，这很奇怪；但对我来说确实有效。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <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');
            }
        });

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

    https://developer.mozilla.org/en-us/docs/web/security/securing_your_site/turning_off_form_autocompletion-mdnhttps://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3f8ef0908-中等在Edge、Chrome(最新版V63)、Firefox Quantum(57.0.4 64-бит)、Firefox(52.2.0)上测试"假字段"是Chrome/Opera自动填充的一种解决方法，它可以获取错误的字段。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     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'
          ...
        />

    这对我很有吸引力。

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

    您可以在属性name中添加名称，例如：email地址如何形成和生成电子邮件值：

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

    如果使用此方法，谷歌Chrome将无法插入自动填充密码。

    为什么你会让你的用户的生活不convenient吗？

    "密码/信用卡/数据等。不应该被救"是一个要求：与在线参数的自动完成功能，browsers在Mac OS X的值大，这样在一个加密的数据库和应用permissions付费。conversely，是什么realistic效应(autocomplete=off吗？冰的用户将它写在一个文本文件unencrypted或更好，然而，在一个贴附注的屏幕。

    好东西有像我一的书签和上述的安蒂，补丁，使发动机的属性的档案共。

    说真的，你reconsider急迫性使用这两个属性。它不利益的人。

    • 关于javascript：HTML表单只读SELECT标签/输入

    浏览器表单字段自动完成

    最新内容

    相关内容

    热门文章

    推荐文章

    标签云

    猜你喜欢