告别自动填充烦恼：前端攻克浏览器默认填充的奥秘

前端

2023-08-30 12:12:09

如何让浏览器不再默认填充输入框

简介

作为前端开发人员，您可能会经常遇到浏览器自动填充注册页面输入框的现象。虽然在登录时这种功能很方便，但在注册时却显得有些累赘。更重要的是，对于重视用户隐私和安全的网站来说，自动填充可能会带来潜在风险。

了解不同浏览器的兼容性

在解决问题之前，了解不同浏览器的兼容性至关重要：

谷歌浏览器： 支持通过设置 autocomplete="off" 属性阻止自动填充。
火狐浏览器： 同样支持通过设置 autocomplete="off" 属性阻止自动填充。
微软 Edge浏览器： 需要设置 autocomplete="new-password" 属性才能阻止自动填充。
Safari浏览器： 不支持通过设置属性阻止自动填充，但可通过设置 autofill-type="off" 属性禁用自动填充功能。

解决方案

1. 使用 autocomplete 属性

autocomplete 属性可控制浏览器是否自动填充输入框：

在 input 元素中设置 autocomplete="off" 可阻止自动填充。
在 form 元素中设置 autocomplete="off" 可阻止表单中所有输入框的自动填充。

<input type="text" autocomplete="off">
<form autocomplete="off">
  <input type="text">
  <input type="password">
</form>

2. 使用 autofill-type 属性

autofill-type 属性可指定输入框的自动填充类型：

在 input 元素中设置 autofill-type="off" 可禁用自动填充功能。
在 input 元素中设置 autofill-type="new-password" 可阻止浏览器自动填充密码输入框。

<input type="text" autofill-type="off">
<input type="password" autofill-type="new-password">

3. 使用 JavaScript

如果以上方法无效，可以使用 JavaScript 阻止自动填充：

页面加载时，设置 autocomplete 或 autofill-type 属性。
用户尝试自动填充输入框时，阻止自动填充。

document.getElementById("username").autocomplete = "off";
document.getElementById("password").autofill-type = "new-password";

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll("input[type=text]").forEach(function(input) {
    input.addEventListener("input", function() {
      if (input.value === "username") {
        input.autocomplete = "off";
      }
    });
  });
});