Google Chrome自动填充所有密码输入框
Google Chrome自动填充所有密码输入框
我的问题
我可能在我的网站上开启了Google的自动填充功能，但现在每当我想要编辑我的账户信息或编辑其他用户的账户信息（作为管理员）时，它都会尝试自动填充那些登录数据，而且填充的位置很奇怪。问题似乎是Chrome会自动填充任何类型为密码的输入框，然后再填充前面的输入框（参见下面的图片）。如果我在它前面加一个选择框，它就不会自动填充了。
显然，我不想每次编辑用户时都要删除密码/电话。我也不希望用户在编辑自己的账户时也要这样做。我该如何删除它？
我尝试过的方法（没有成功）
- 在表单以及电话和密码输入框中添加autocomplete="off"
- 在两个输入框中添加value=""
- 更改密码输入框的name属性。我尝试了pw、pass、password和cheese（以防Chrome识别到了这个名称）
- 通过jquery的.attr方法添加autocomplete="off"
我发现的情况
我发现Google可能故意忽略了autocomplete属性：Google忽略autocomplete
我发现另一个用户发布了一个类似的问题，但解决方法对我不起作用：禁用Chrome自动填充
我还发现另一个用户使用了一个变通方法，涉及创建一个隐藏的密码字段来接受Google的自动填充，但我更希望有一个更简洁的解决办法，因为在我的情况下，我还需要在它上面添加一个隐藏的输入框来避免它们都自动填充：在Chrome中禁用自动填充而不禁用自动完成
Google Chrome自动填充所有密码输入的问题出现的原因是，浏览器会自动填充任何类型为密码的输入框，并将之前的输入作为用户名填充到密码输入框之前最近的文本输入框中。
解决方法是给密码输入框设置为只读模式，并在获得焦点时取消只读模式。对于移动Safari浏览器，需要在取消只读模式后再次获得焦点，以触发虚拟键盘的显示。
具体的解决方法代码如下：
对于移动Safari浏览器的解决方法代码如下：
此外，还需要在CSS中添加以下样式：
input[readonly] { cursor: text; }
以上解决方法已经经过验证，可以解决Chrome和Safari浏览器自动填充密码输入框的问题。这个解决方法非常好用，感谢作者的分享！
问题出现的原因：Google Chrome自动填充所有密码输入框
解决方法：在HTML5的自动填充属性中，有一个名为"new-password"的新属性，我们可以使用它来解决这个问题。以下方法适用于我：
其中，`current-password`属性允许浏览器或密码管理器为该站点输入当前密码。与"on"属性相比，它提供了更多的信息，因为它让浏览器或密码管理器知道在该字段中使用当前已知的密码，而不是一个新密码。
而`new-password`属性允许浏览器或密码管理器自动输入该站点的新密码。这个新密码可以根据控件的其他属性自动生成，也可以简单地告诉浏览器呈现某种类型的“建议新密码”小部件。
参考：[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password)
注意：不幸的是，无法动态更改`autocomplete`字段。如果密码字段的角色发生变化（例如已知用户输入了他们的电子邮件），则应该使用两个密码字段 - 各自为一种类型（截至今天的当前Chrome版本）。
Google Chrome自动填充所有密码输入框的问题出现的原因是Chrome忽略了"autocomplete="off""属性，并且假设密码字段前面的字段必须是用户名/邮箱字段，并且应该自动填充。
然而，可以通过利用HTML5的autocomplete属性规范来解决这个问题。在下面的链接中可以看到，这个属性有标准的取值。为了避免Chrome认为密码前面的字段是邮箱字段，可以使用官方的取值之一（例如，使用"tel"表示电话号码），或者使用一个不存在于列表中的值，但也不是"off"或"false"。
Google建议在标准取值前面加上"new-"前缀，例如使用"autocomplete="new-tel""。如果想要密码字段不自动填充，可以使用"autocomplete="new-password""。
虽然从技术上讲，你当然可以将属性设置为任意没有上下文的随机值（例如"autocomplete="blahblahblah""），但我建议使用"new-"前缀，因为它可以帮助未来的开发人员理解你使用这个属性的目的。