HTML中autocomplete="off"对地址/信用卡输入失效问题咨询

现代浏览器为了优化用户体验，会在地址、信用卡这类高频使用的字段上忽略autocomplete="off"设置，以下是几个靠谱的解决办法：

• 使用带"new-"前缀的特定autocomplete值
  浏览器会识别以new-开头的属性值为「不需要填充已有数据」，针对不同字段用对应的值：

  • 地址类：autocomplete="new-street-address"、autocomplete="new-postal-code"
  • 信用卡类：autocomplete="new-cc-number"（部分浏览器支持，明确标记为新卡号输入）
    示例代码：

  <input type="text" name="user-address" autocomplete="new-street-address">
  <input type="text" name="user-cc" autocomplete="new-cc-number">
  

• 动态设置autocomplete属性
  有些浏览器会在页面初始化时优先读取缓存数据，延迟设置属性可以绕过这个逻辑：

  window.addEventListener('load', () => {
    const targetInputs = document.querySelectorAll('input[name="address"], input[name="credit-card"]');
    targetInputs.forEach(input => {
      input.setAttribute('autocomplete', 'off');
      // 额外添加随机后缀的name属性增强效果
      input.name += '-' + Math.random().toString(36).substr(2, 5);
    });
  });
  

• 添加隐藏的"诱饵"输入框
  在实际输入框前放置隐藏的同类型输入框，让浏览器把自动填充内容放到诱饵框里：

  <!-- 诱饵输入框：隐藏且设置浏览器会匹配的autocomplete值 -->
  <input type="text" name="address" autocomplete="street-address" style="position: absolute; left: -9999px; top: -9999px;">
  <!-- 实际输入框 -->
  <input type="text" name="real-address" autocomplete="off">
  

注意：不同浏览器的自动填充逻辑略有差异，可能需要结合多种方法测试，找到最适合你场景的方案。

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