输入框的autocomplete为new-password无效？

chjxhcdc

2491581

发布于
7 月 24 日广东

我为一个输入框设置了autocomplete为new-password，但是浏览器仍然会自动填充用户名到该输入框中，请问该怎么解决？

前端 html

html5

阅读 2.8k

AI BotBETA

当设置 autocomplete="new-password" 时，您的意图是告诉浏览器这是一个用于新密码输入的字段，它通常应该不被自动填充。然而，不同浏览器对 autocomplete 属性的支持和行为可能会有所不同。

在某些浏览器中，autocomplete="new-password" 可能会被忽略，或者浏览器可能会使用其自己的启发式方法来决定是否自动填充表单字段。

要解决这个问题，您可以尝试以下几种方法：

使用 autocomplete="off"：虽然 autocomplete="off" 不特定于密码字段，但它可能会阻止大多数浏览器的自动填充行为。但请注意，有些浏览器（特别是Chrome）可能会忽略这一属性。

<input type="password" name="newpassword" autocomplete="off">

使用随机或动态的字段名称：浏览器通常使用字段名称来决定是否自动填充。通过每次页面加载时动态生成字段名称，您可以使浏览器更难确定是否应该自动填充该字段。

<input type="password" name="newpassword_<?php echo uniqid(); ?>" autocomplete="off">

但请注意，这种方法可能会使服务器端的表单处理变得复杂。

使用JavaScript清除自动填充的值：在页面加载时，使用JavaScript检查并清除自动填充的字段值。

window.onload = function() {
    var passwordInput = document.querySelector('input[type="password"]');
    if (passwordInput.value) {
        passwordInput.value = '';
    }
};

禁用浏览器密码保存提示：如果您不希望浏览器提示用户保存密码，您可以在表单提交时通过JavaScript阻止默认的表单提交行为，并使用Ajax或Fetch API提交表单。但请注意，这可能会降低用户体验。
确保表单的 action 属性是正确的：在某些情况下，如果表单的 action 属性与浏览器之前保存的表单的 action 不匹配，浏览器可能不会自动填充该表单。确保您的表单的 action 属性是正确的。
使用CSS隐藏自动填充的黄色背景（仅作为视觉上的解决方案）：

input:-internal-autofill-selected {
    /* 样式以隐藏黄色背景 */
    background-color: white !important;
    -webkit-text-fill-color: black !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

请注意，没有一种方法可以在所有浏览器中都完全可靠地阻止自动填充。最好的策略可能是结合使用上述几种方法，以在大多数情况下获得所需的结果。

2 个回答

得票最新

微芒不朽

1.2k121

发布于
7 月 24 日湖南

✓ 已被采纳

浏览器自动填充行为有时会忽略 autocomplete="new-password" 的设置，尤其是在某些浏览器或特定情况下。这里有几种方法可以尝试解决这个问题：

更改 autocomplete 属性的值：
尝试使用不同的值，如 off，虽然这不总是有效，因为不同的浏览器对这些值的支持不同。
```
<input type="text" name="user" autocomplete="off">
```
动态设置属性：
在页面加载后，通过JavaScript动态设置输入框的 autocomplete 属性，有时可以绕过浏览器的自动填充。
```
<input type="text" id="username">
document.getElementById('username').setAttribute('autocomplete', 'new-password');
```
使用隐藏的输入框：
在目标输入框之前放置一个或多个隐藏的输入框，这些输入框也设置为 autocomplete="new-password"，有时可以“欺骗”浏览器自动填充这些隐藏的输入框而不是实际的输入框。
```
<input type="password" style="display:none" autocomplete="new-password">
<input type="text" name="user" autocomplete="new-password">
```
更改输入框的名称和ID：
不使用常见的字段名称（如 username, user 等），因为浏览器可能会识别这些名称并尝试自动填充。
```
<input type="text" name="unique_user_name" id="unique_user_id" autocomplete="new-password">
```

查看全部 2 个回答

推荐问题

输入框的autocomplete为new-password无效？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

如何自定义设置虚线边框的样式？

前端有没有办法实现页面截图？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？