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

Question

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

Answer 1

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

1. 更改 autocomplete 属性的值：
   尝试使用不同的值，如 off，虽然这不总是有效，因为不同的浏览器对这些值的支持不同。

   <input type="text" name="user" autocomplete="off">

2. 动态设置属性：
   在页面加载后，通过JavaScript动态设置输入框的 autocomplete 属性，有时可以绕过浏览器的自动填充。

   <input type="text" id="username">
   document.getElementById('username').setAttribute('autocomplete', 'new-password');

3. 使用隐藏的输入框：
   在目标输入框之前放置一个或多个隐藏的输入框，这些输入框也设置为 autocomplete="new-password"，有时可以“欺骗”浏览器自动填充这些隐藏的输入框而不是实际的输入框。

   <input type="password" style="display:none" autocomplete="new-password">
   <input type="text" name="user" autocomplete="new-password">

4. 更改输入框的名称和ID：
   不使用常见的字段名称（如 username, user 等），因为浏览器可能会识别这些名称并尝试自动填充。

   <input type="text" name="unique_user_name" id="unique_user_id" autocomplete="new-password">

Answer 2

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

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

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

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

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

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

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

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

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

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

4. 禁用浏览器密码保存提示：如果您不希望浏览器提示用户保存密码，您可以在表单提交时通过JavaScript阻止默认的表单提交行为，并使用Ajax或Fetch API提交表单。但请注意，这可能会降低用户体验。
5. 确保表单的 action 属性是正确的：在某些情况下，如果表单的 action 属性与浏览器之前保存的表单的 action 不匹配，浏览器可能不会自动填充该表单。确保您的表单的 action 属性是正确的。
6. 使用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;
}

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