Google Chrome自动填充所有密码输入

Question

我的问题

我必须打开谷歌自动填写我的网站上的登录,但是当我想编辑我的帐户信息或编辑其他用户帐户信息(作为管理员)时,它现在尝试自动填充该登录数据.它在奇怪的地方填写我的数据.问题似乎是Chrome自动使用一种密码填充任何输入,然后输入任何输入(见下图).如果我在它之前放置一个选择框,那么它将不会自动填充.

我很明显不想每次编辑用户时都要通过并删除密码/手机.我也不希望我的用户在编辑自己的帐户时必须这样做.我该如何删除它？

我尝试了什么 (没有成功)

• 将autocomplete ="off"添加到表单以及电话和密码输入.
• 为两个输入添加值=""
• 更改密码输入的名称=.我尝试了pw,pass,密码和奶酪(因为chrome正在拿起这个名字)
• 通过jquery .attr添加autocomplete ="off"

我发现了什么

我发现Google可能会故意忽略自动填充功能:Google无视自动填充功能

我发现其他用户发布了类似的问题,但该解决方案对我不起作用:停用Chrome自动填充功能

我还发现另一个用户正在做一个涉及创建一个隐藏密码字段的工作,该字段将采用谷歌自动完成,我更喜欢一个更干净的解决方案,因为我的情况下我还需要一个隐藏的输入,以避免两者都自动填充:禁用自动填充在chrome中而不禁用自动完成功能

Answer 1

在具有自动完成属性的HTML5中,有一个名为"new-password"的新属性,我们可以使用它来解决此问题.以下为我工作.

<input id="userPassword" type="password" autocomplete="new-password">

current-password: 允许浏览器或密码管理器输入站点的当前密码.这提供了比"on"更多的信息,因为它让浏览器或密码管理器知道在该字段中使用当前已知的站点密码,而不是新的密码.

new-password: 允许浏览器或密码管理器自动输入站点的新密码.这可能是基于控件的其他属性自动生成的,或者可能只是告诉浏览器呈现某种"建议的新密码"小部件.

参考:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password

Answer 2

有时甚至autocomplete = off也不会阻止将凭据填入错误的字段,而不是用户或昵称字段.

修复:浏览器通过只读模式自动填充并在焦点上设置可写

 <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

说明:浏览器自动将凭据填充到错误的文本字段？

@Samir:Chrome会自动使用一种密码填充任何输入,然后输入任何输入

当有相同表格的密码字段时,有时我会注意到Chrome和Safari上的这种奇怪行为.我猜,浏览器会查找密码字段以插入您保存的凭据.然后它将用户名自动填充到最近的textlike-input字段中,该字段出现在DOM中的密码字段之前(仅因为观察而猜测).由于浏览器是最后一个实例而您无法控制它,

上面的readonly-fix对我有用.

Answer 3

这可以在没有黑客的情况下解决,但它不一定是直观的.Chrome有两个奇怪的决定.首先,Chrome会autocomplete="off"在解析时忽略,其次,Chrome会假设密码字段必须是用户名/电子邮件字段之前的字段,并且应该自动完成.

虽然利用HTML5自动完成属性规范,但有很多方法可以解决这个问题.

正如您将在下面的链接中看到的,该属性有标准值autocomplete.为避免Chrome在密码为电子邮件字段之前假设该字段,请使用其中一个官方值(例如,tel用于电话号码),或者组成列表中不存在的值,但也不是off或false.

Google建议您使用其中一个标准值new-,例如,值autocomplete="new-tel".如果您希望密码字段不自动完成,您可以使用autocomplete="new-password",例如.

虽然从技术上讲你可以使属性随机而没有上下文到同样的效果(例如autocomplete="blahblahblah"),我推荐使用new-前缀,因为它有助于任何未来的开发人员在你的代码上使用这个属性完成你正在完成的事情.

参考:https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls : -the- autocomplete- attribute