Chrome浏览器信用卡及CVV输入框自动补全禁用失败求助

我之前也踩过Chrome自动补全的坑，尤其是信用卡和CVV这类敏感字段，官方的autocomplete="off"经常失效——毕竟Chrome现在会优先识别字段用途，而不是完全遵循属性设置。分享几个亲测有效的方案：

方案1：动态设置autocomplete属性 #

Chrome有时候会在页面初始渲染时忽略autocomplete="off"，可以通过JS在页面加载后动态设置，绕开这个机制：

window.addEventListener('load', function() {
  const ccFields = document.querySelectorAll('[name="cc-number"], [name="cvv"]');
  ccFields.forEach(field => {
    field.setAttribute('autocomplete', 'off');
    // 额外加个随机属性干扰识别逻辑
    field.setAttribute('data-random-id', Math.random().toString(36).substring(2));
  });
});

方案2：使用非标准字段名/ID #

Chrome的自动填充引擎依赖字段的name、id或标签文本识别类型，把字段名改成无意义的随机值，让它无法识别：

<!-- 不要用cc-number、cvv这类标准命名 -->
<input type="text" name="user-payment-card-xyz" placeholder="信用卡号" autocomplete="off">
<input type="text" name="user-security-code-abc" placeholder="CVV" autocomplete="off">

方案3：readonly + 点击激活 #

利用Chrome不会填充只读字段的特性，初始给字段加readonly，用户点击/聚焦时移除该属性：

<input type="text" name="cvv" readonly onclick="this.removeAttribute('readonly');" placeholder="CVV">
<!-- 用focus事件更贴合用户操作习惯 -->
<input type="text" name="cc-number" readonly onfocus="this.removeAttribute('readonly');" placeholder="信用卡号">

方案4：优化虚拟字段方案 #

你之前试过的虚拟字段可能位置或属性不对，试试这样设置：在真实字段前放一个移出视口而非完全隐藏的假字段，避免被Chrome识别为"欺骗性隐藏"，同时给真实字段设置独特的name：

<!-- 假字段用绝对定位移出视口，不要用display:none -->
<input type="text" name="credit-card" style="position: absolute; left: -9999px; top: -9999px;">
<input type="text" name="real-cc-number" placeholder="信用卡号" autocomplete="off">

<!-- CVV同理 -->
<input type="text" name="cvv-fake" style="position: absolute; left: -9999px; top: -9999px;">
<input type="text" name="real-cvv" placeholder="CVV" autocomplete="off">

这些方案我在Chrome最新版本里都测试过，基本能解决自动补全的问题。如果还是有瑕疵，可以试试组合多个方案，比如同时修改字段名+动态设置属性。

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