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

最新推荐文章于 2023-08-18 08:57:45 发布

p15097962069

最新推荐文章于 2023-08-18 08:57:45 发布

阅读量882

点赞数

文章标签： html browser autocomplete

原文链接：https://pl.sofbug.com/question/eo

版权

如何在主要浏览器中为特定input （或form field ）禁用autocomplete ？

#1楼

您可以在输入中使用。

例如;

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

#2楼

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

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

#3楼

三个选择：第一：

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

第二：

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

第三（JavaScript代码）：

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

#4楼

在此对话中，没有任何解决方案对我有用。

我终于想通了， 不需要使用Javascript，在现代浏览器上运行一个纯HTML的解决方案 （除了IE;有过至少1捕，对吧？），并且不要求您为整个表单自动完成禁用。

只需关闭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>

#5楼

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

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

#6楼

现在，大多数主要的浏览器和密码管理器（正确的是IMHO）都会忽略autocomplete=off 。

为什么？许多银行和其他“高安全性”网站都出于“出于安全目的”在其登录页面上添加了autocomplete=off补全autocomplete=off但这实际上降低了安全性，因为这会使人们更改这些高安全性网站上的密码容易记住（从而破解）。），因为自动填充功能已损坏。

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

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

Web开发人员要做什么？

如果您可以自己将所有密码字段保留在页面上，那么这是一个很好的开始，因为似乎密码字段的存在是触发用户/密码自动完成功能的主要触发因素。否则，请阅读以下提示。
Safari注意到有两个密码字段，并且在这种情况下会禁用自动完成功能，前提是该密码必须是更改密码形式，而不是登录形式。因此，请确保在您允许的任何表单中使用2个密码字段（新密码并确认新密码）
不幸的是， Chrome 34会在看到密码字段时尝试使用用户/密码自动填充字段。这是一个非常糟糕的错误，希望它们会改变Safari的行为。但是，将其添加到表单顶部似乎会禁用密码自动填充功能：
```
 <input type="text" style="display:none"> <input type="password" style="display:none"> 
```

我尚未对IE或Firefox进行彻底调查，但是如果其他人在评论中有信息，我将很乐意更新答案。

#7楼

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

此解决方法是apinstein关于浏览器行为的文章的补充。

修复浏览器以只读方式自动填充并设置为可写焦点（单击和标签）

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

更新：Mobile Safari在该字段中设置了光标，但不显示虚拟键盘。 New Fix的工作原理与以前相同，但是可以处理虚拟键盘：

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

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

// UpdateEnd

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

当密码字段的格式相同时 ，我会在Chrome和Safari上发现这种奇怪的行为。我猜想，浏览器会寻找一个密码字段来插入您保存的凭据。然后，它会自动填充（仅出于观察目的而猜测）最接近的类似文本的输入字段，该字段出现在DOM中的密码字段之前。由于浏览器是最后一个实例，您无法控制它，

上面的只读修复对我有用。

#8楼

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

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

根据Mozilla开发人员网络文档，布尔表单元素属性autocomplete可以防止将表单数据缓存在较旧的浏览器中。

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

#9楼

在字段中使用非标准名称和ID，因此“名称”不是“名称”。这样浏览器就不会将其视为名称字段。最好的部分是您可以对部分但不是全部字段执行此操作，它将自动完成部分但不是全部字段。

#10楼

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

这将在Internet Explorer和Mozilla FireFox中运行，缺点是它不是XHTML标准。

#11楼

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

#12楼

我一直在尝试无休止的解决方案，然后发现了这一点：

代替autocomplete="off" ，只需使用autocomplete="false"

就这么简单，它在Google Chrome浏览器中也很吸引人！

#13楼

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

这是我的解决办法。我在框架中实现的一种方法。所有自动完成元素都是使用隐藏输入生成的，如下所示：

<? $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>

然后，服务器处理以下变量：

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

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

即使浏览器进行了更新，所有功能都像超级按钮一样，都希望忽略或不忽略自动完成功能。这是为我解决此问题的最佳方法。

#14楼

此处提到的所有骇客都无法在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>

#15楼

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

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

#16楼

游戏有点晚了...但是我只是遇到了这个问题，并尝试了几次失败，但这在MDN上对我有用

在某些情况下，即使将autocomplete属性设置为off，浏览器也会继续建议自动补全值。对于开发人员而言，这种意外行为可能会令人困惑。真正强制不完成的技巧是为属性分配一个随机字符串，如下所示：

autocomplete="nope"

#17楼

我很难相信这已经被报道了这么久了。上面的解决方案对我不起作用，因为safari似乎知道何时不显示元素或不在屏幕外，但是以下内容对我有用：

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

希望对某人有用！

#18楼

就是这样：

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

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

#19楼

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所做的更改生效，许多浏览器将页面保存在缓存中，这给我留下了不好的印象，即该页面不起作用，但浏览器实际上并未带来更改。

#20楼

这对我有用。

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

我们还可以在其他控件（例如文本，选择等）中使用此策略

#21楼

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

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

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

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

#22楼

尝试添加

readonly onfocus =“ this.removeAttribute（'readonly'）;”

此外

autocomplete =“ off”

到您不想记住表单数据（ 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等）上进行了测试，并且可以正常工作。希望这可以帮助...

#23楼

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

但是，我认为有必要说明为什么在某些情况下使用此方法是个好主意，因为对此的一些答案和重复的问题表明最好不要将其关闭。

停止将存储信用卡号的浏览器留给用户。太多的用户甚至没有意识到这是一个问题。

尤其是在信用卡安全码字段中将其关闭非常重要。如该页面所述：

“永远不要存储安全代码...其价值取决于以下假设：提供该安全代码的唯一方法是从实物信用卡中读取该安全代码，从而证明提供该安全代码的人实际上持有该卡。”

问题是，如果这是一台公用计算机（网络咖啡馆，图书馆等），那么其他用户很容易窃取您的卡详细信息，即使是在您自己的计算机上，恶意网站也可能窃取了自动完成的数据。

#24楼

最佳解决方案：

防止自动填充用户名（或电子邮件）和密码：

<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
Firefox：44、45、46、47、48、49、50、51、52、53、54、55、56、57和58

#25楼

添加

autocomplete="off"

标记到表单标签将禁用该特定表单内所有input字段的浏览器自动完成功能（以前在该字段中键入的内容）。

经过测试：

Firefox 3.5、4个测试版
Internet Explorer 8
铬

#26楼

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

“如果您是上述表单的用户，并且想要重新启用自动完成功能，请从此书签页面使用'记住密码'书签。它将从页面上所有表单中删除所有autocomplete="off"属性。请保留打好仗！”

#27楼

我认为HTML 5支持autocomplete=off 。

问问自己自己为什么要这样做-在某些情况下这可能是有道理的，但不要只是为了做而已。

这对于用户来说不太方便，甚至在OS X中也没有安全问题（下面由Soren提到）。如果您担心别人的密码被远程窃取，即使您的应用程序使用autcomplete=off击键记录器仍然可以执行此操作。

作为选择使用浏览器的用户，我的大部分信息都记住了，如果您的网站不记得我的信息，我会觉得很烦。

#28楼

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

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

希望对其他人有帮助。

#29楼

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

因此，我们让登录页面生成了仅适用于该帖子的随机字段名称。是的，它不太方便，但是只是在不将登录信息存储在公共终端上的情况下打了用户的头脑。