如何通过代码禁用Chrome与Edge的密码自动填充功能

针对你遇到的常规autocomplete属性无效的情况，可以尝试以下几种偏hack但有效的方案，绕过Chrome的自动填充机制：

1. 动态切换输入框类型 #

页面加载时先将密码框设为文本类型，聚焦时再切换为密码类型，同时搭配一个无意义的autocomplete值，干扰浏览器识别：

<input type="text" id="target-password" autocomplete="unique-non-standard-value">
<script>
const pwdInput = document.getElementById('target-password');
pwdInput.addEventListener('focus', () => {
  pwdInput.type = 'password';
});
pwdInput.addEventListener('blur', () => {
  pwdInput.type = 'text';
});
</script>

2. 添加前置隐藏假密码框 #

在真实密码框前插入一个绝对定位隐藏的假密码框，让Chrome自动填充到这个不可见的输入框中，从而避开真实输入框：

<!-- 假密码框，完全脱离可视区域 -->
<input type="password" style="position: absolute; left: -9999px; top: -9999px;" autocomplete="off">
<!-- 真实密码输入框 -->
<input type="password" id="actual-password" autocomplete="new-password">

3. 更换输入框的name/id属性 #

避免使用password这类浏览器默认会关联自动填充的属性名，改用自定义命名，同时配合autocomplete="off"：

<input type="password" name="custom-user-pwd" id="custom-user-pwd" autocomplete="off">

这些方案的核心思路是干扰Chrome对密码输入框的识别逻辑，因为浏览器的自动填充机制优先级很高，常规属性经常被忽略。

内容的提问来源于stack exchange，提问作者Ella SEON