javascript - 输入框自动弹出用户名密码弹窗如何禁用?

Question

如图所示，禁用chrome浏览器保存的用户名密码弹窗。
还有就是，什么时候会弹出这个用户名密码弹窗，为什么有的输入框不弹出呢？

Answer 1

试试 https://developer.mozilla.org/zh-CN/docs/Web/Security/Practic...

弹窗是因为设置了 password 类型，首次登录后弹窗选择记住密码过 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/inp...

Answer 2

在Chrome浏览器中，自动填充表单（包括用户名和密码）的行为是由浏览器的自动填充功能控制的，这通常是为了提升用户体验。然而，如果你想要在你的网站或应用中禁用这个功能，尤其是禁用自动弹出用户名密码的弹窗，你可以通过以下几种方式尝试：

1. 使用autocomplete属性

对于表单元素，你可以设置autocomplete属性为off或尝试使用一个不常见的值（尽管现代浏览器可能不完全遵守这个属性）。

<form autocomplete="off">
    <input type="text" name="username" autocomplete="off" />
    <input type="password" name="password" autocomplete="new-password" />
</form>

注意，对于密码输入框，autocomplete="new-password"是一个特殊值，它指示浏览器不应自动填充密码。然而，这并不总是能阻止浏览器显示保存的用户名和密码的弹窗。

2. 隐藏或伪装表单字段

在某些情况下，你可以通过隐藏或伪装表单字段来避免触发自动填充。这可以通过CSS或JavaScript实现，但这种方法可能会影响表单的可访问性和用户体验。

3. JavaScript 干预

在表单提交前，你可以使用JavaScript来清空表单字段，但这通常不是一个好的用户体验，并且可能不适用于所有情况。

4. 更改表单结构

有时，简单地更改表单的字段顺序或添加额外的字段（例如，隐藏字段）可以干扰浏览器的自动填充算法。

5. 服务器端控制

虽然这不是直接禁用浏览器自动填充的方法，但你可以通过服务器端逻辑来忽略自动填充的表单数据，要求用户重新输入敏感信息。

6. 使用浏览器设置

最终，用户可以在他们的浏览器设置中禁用自动填充功能。这通常是最有效的解决方案，但显然它依赖于用户的主动操作。

结论

由于浏览器的自动填充行为是由浏览器本身控制的，因此很难通过前端技术完全禁用它。autocomplete="off"和autocomplete="new-password"提供了有限的帮助，但可能并不总是有效。最好的做法可能是结合使用上述方法，并在可能的情况下，教育用户如何在其浏览器设置中管理自动填充功能。