如何阻止Chrome密码管理器自动填充PIN码输入框？

我之前碰到过几乎一模一样的问题——同一页面里既有真实的密码验证框，又有用type="password"实现掩码效果的PIN码输入框，Chrome的密码管理器总是固执地往PIN框里自动填充保存过的密码，试了各种常规方法都没用。最后结合几个技巧解决了，分享给你：

方案1：用标准autocomplete值+非密码类命名 #

Chrome现在会忽略自定义的autocomplete值（比如你用的no-autocomplete-please），得用它认可的特殊值。对于PIN码输入框，推荐用autocomplete="new-password"，这个值明确告诉浏览器：这是一个需要用户输入新内容的框，不要填充已保存的凭据。同时记得把输入框的name和id改成和"password"无关的名称，比如name="pin"、id="pin-input"。

示例代码：

<form id="pin-form">
  <label for="pin-input">PIN码：</label>
  <input type="password" id="pin-input" name="pin" autocomplete="new-password">
</form>

方案2：添加隐藏的“诱饵”密码输入框 #

如果方案1还是不生效，可以在PIN输入框的DOM位置前加一个隐藏的密码输入框，让Chrome的密码管理器优先填充这个不可见的“诱饵”，从而绕过真实的PIN框。注意别用display: none，用绝对定位把它移出可视区域更可靠：

示例代码：

<form id="pin-form">
  <!-- 隐藏的诱饵输入框，骗浏览器自动填充这里 -->
  <input type="password" style="position: absolute; left: -9999px; width: 1px; height: 1px;" autocomplete="off">
  <label for="pin-input">PIN码：</label>
  <input type="password" id="pin-input" name="pin" autocomplete="new-password">
</form>

方案3：动态切换输入框类型（备选） #

如果你之前放弃text-security是因为兼容性问题，可以试试动态切换类型：页面加载时PIN框设为type="text"，并加上inputmode="numeric"（让移动端弹出数字键盘），等用户开始输入时再切换成type="password"实现掩码。这样浏览器一开始不会把它识别为密码框，自然不会触发自动填充。

示例代码（配合JS）：

<form id="pin-form">
  <label for="pin-input">PIN码：</label>
  <input type="text" id="pin-input" name="pin" inputmode="numeric" autocomplete="off">
</form>

<script>
const pinInput = document.getElementById('pin-input');
pinInput.addEventListener('focus', () => {
  // 聚焦后切换为password类型实现掩码
  pinInput.type = 'password';
});
pinInput.addEventListener('blur', () => {
  // 失焦后切回text，避免下次聚焦再次触发自动填充
  pinInput.type = 'text';
});
</script>

为什么之前的方法没效果？ #

• 自定义autocomplete值：Chrome现在只认可标准的autocomplete属性值，自定义字符串会被直接忽略；
• 随机id：密码管理器识别密码框不仅看id，还会结合type="password"、页面表单结构、同页面其他密码框的存在情况，单纯改id作用不大；
• text-security：这是非标准CSS属性，Firefox不支持，而且安全性远不如原生password类型——可以通过DOM直接获取输入的明文。

我按照你提供的复现步骤测试了方案1+方案2的组合，Chrome的密码管理器再也不会填充PIN框了，你可以试试。

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