如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?


当前回答

Chrome一直试图强制自动完成。所以你需要做一些事情。

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

相邻的标签或div也需要不可识别。然而,您可能会想,用户如何知道?好吧,在使用内容后,您可以使用::做一个有趣的小技巧。你可以将其设置为字母。

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

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

其他回答

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

/***防止字段自动填充字段。*当关注具有自动完成功能的文本字段(值为:“off”、“none”、“false”)时,我们将该值替换为新的唯一值(此处为-“off forced-[TIMESTAMP]”),*浏览器在保存的值中找不到这种类型的自动完成,并且不提供选项。*然后,为了防止输入的文本保存在浏览器中,以便进行新的唯一自动完成,当字段失去焦点或用户按下Enter键时,我们将其替换为先前设置的文本。*@type{{init:*}}*/var PreventFieldsAutofill=(函数(){函数init(){events.onPageStart();}var事件={onPageStart:函数(){$(document).on('fous','输入[autocomplete=“off”],输入[autocomplete=“none”],input[autocomplete=“false”]',函数(){methods.replaceAttrs($(this));});$(document).on('blur','input[data prev autocomplete]',函数(){methods.returnAttrs($(this));});$(document).on('keydown','input[data prev autocomplete]',函数(事件){if(event.keyCode==13 | | event.which==13){methods.returnAttrs($(this));}});$(document).on('submit','form',函数(){$(this).find('input[data prev autocomplete]').each(函数(){methods.returnAttrs($(this));});});}};var方法={/***将autocomplete和name属性的值替换为unique,并将原始值保存为新的数据属性*@param$输入*/replaceAttrs:函数($input){var randomString='off-forced-'+Date.now();$input.attr('data-prev-autocomplete',$input.aattr('自动完成'));$input.attr('自动完成',随机字符串);if($input.attr('name')){$input.attr('data-prev-name',$input.atr('name'));$input.attr('name',randomString);}},/***恢复原始自动完成和名称值,以防止在浏览器中保存文本以获取唯一值*@param$输入*/returnAttrs:函数($input){$input.attr('自动完成',$input.atr('数据-版本-自动完成'));$input.removeAttr('data-prev-autocomplete');if($input.attr('data-prev-name')){$input.attr('name',$input.atr('data-prev-name'));$input.removeAttr('data-prev-name');}}};返回{init:初始化}})();PreventFieldsAutofill.init();.输入{显示:块;宽度:90%;填充:6px 12px;字体大小:14px;线高:1.42857143;颜色:#555555;背景色:#fff;背景图像:无;边框:1px实心#ccc;边界半径:4px;}<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js“></script><form action=“#”><p><label for=“input-1”>Firts name without autocomplete</label><br/><input id=“input-1”class=“input”type=“text”name=“first name”autocomplete=“off”placeholder=“Firts name without autocomplete”/></p><p><label for=“input-2”>Firts name with autocomplete</label><br/><input id=“input-2”class=“input”type=“text”name=“first name”autocomplete=“given name”placeholder=“Firts name with autocomplete”/></p><p><button type=“submit”>提交表单</button></p></form>

我真不敢相信,这件事被报道了这么久,仍然是一个问题。以前的解决方案对我来说不起作用,因为Safari似乎知道元素何时不显示或不在屏幕上,但下面的解决方案确实对我起作用:

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

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

密码管理器始终提示是否要保存密码。未经用户许可,密码不会保存。我们是继IE和Chrome之后第三个实现这一改变的浏览器。

根据Mozilla开发者网络文档,布尔表单元素属性autocomplete防止表单数据在旧浏览器中缓存。

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

您可以在属性name how电子邮件地址中向表单添加名称,并生成电子邮件值。例如:

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

如果使用此方法,Google Chrome将无法插入自动填充密码。

我们确实在一个网站上使用了sasb的想法。

这是一个运行医生办公室的医疗软件网络应用程序。然而,我们的许多客户都是外科医生,他们使用了许多不同的工作站,包括半公共终端。因此,他们希望确保一个不了解自动保存密码含义或不注意的医生不会意外地将登录信息轻易地留下。

当然,这是在Internet Explorer 8、Firefox 3.1等开始出现私人浏览的想法之前出现的。即便如此,许多医生还是被迫在医院使用老式浏览器,而这些浏览器的IT功能不会改变。

因此,我们让登录页面生成仅适用于该帖子的随机域名。是的,这不太方便,但这只是在打击用户不在公共终端上存储登录信息。