如何禁用非登录表单的浏览器默认密码管理器功能？

以下方案均仅针对PIN码输入框设置，不会影响登录页的密码管理器正常生效：

方案1：HTML原生属性配置（优先推荐，兼容Chrome/Opera） #

给PIN输入框添加如下属性即可：

<input type="password" name="random_field_name" id="random_field_id" autocomplete="new-password">

• autocomplete="new-password"是W3C标准定义的属性值，专门用于提示浏览器当前输入框为新密码输入场景，不要填充已保存的旧密码，Chrome、Opera等Webkit内核浏览器均原生支持，可同时解决自动填充已保存密码、填写后弹出更新密码提示两个问题。
• 避免将name/id属性设置为pin、password、passwd等浏览器特征库中标记为密码场景的字段名，可使用自定义的无意义字段名进一步降低浏览器的识别概率。

方案2：样式模拟密码输入效果（属性方案不生效时替代） #

如果你不需要兼容非Webkit内核浏览器，可直接替换输入框实现逻辑，彻底绕开浏览器的密码识别逻辑：

<input type="text" name="random_field_name" style="-webkit-text-security: disc;">

• 将输入框type改为text，浏览器不会将其识别为密码输入框，不会触发任何密码管理器逻辑。
• 通过-webkit-text-security: disc CSS属性，可实现和type="password"完全一致的输入字符隐藏为圆点的效果，Chrome、Opera均支持该属性。

方案3：JS拦截兜底方案 #

如果上述两种方案都不满足需求，可通过JS跳过浏览器自动填充时机：

const pinInput = document.querySelector('#pin-input')
// 初始设为只读，阻止页面加载时的自动填充
pinInput.setAttribute('readonly', true)
setTimeout(() => {
  // 页面加载完成后延迟100毫秒取消只读
  pinInput.removeAttribute('readonly')
}, 100)
// 聚焦时清空可能被自动填充的内容
pinInput.addEventListener('focus', () => {
  pinInput.value = ''
})

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