如何在HTML中实现完全隐藏的信用卡输入框并支持自动补全？

你遇到的核心问题是：原生type="cc-number"支持浏览器信用卡自动补全，但不会对输入内容做掩码；而type="password"能实现掩码，却不支持信用卡自动补全。解决思路是用两个输入框配合：一个隐藏的真实信用卡输入框（负责对接浏览器自动补全），一个可见的掩码输入框（负责显示星号/黑点），再用JS同步两者的值。

完整实现代码 #

<form>
  <!-- 隐藏的真实输入框，负责接收浏览器自动补全的信用卡号 -->
  <input 
    name="cc-number" 
    type="cc-number" 
    autocomplete="cc-number"
    id="real-cc-input"
    style="position: absolute; left: -9999px; opacity: 0;"
  >

  <!-- 可见的掩码输入框，用于用户输入和显示星号 -->
  <input 
    type="text" 
    id="masked-cc-input"
    placeholder="请输入信用卡号"
    maxlength="19" <!-- 对应带空格的信用卡号格式长度 -->
  >
</form>

<script>
  const realInput = document.getElementById('real-cc-input');
  const maskedInput = document.getElementById('masked-cc-input');

  // 同步自动补全的值到掩码输入框
  realInput.addEventListener('input', syncMask);

  // 处理掩码输入框的用户输入，同步到真实输入框
  maskedInput.addEventListener('input', function(e) {
    // 只保留数字，过滤非数字字符
    const rawValue = this.value.replace(/\D/g, '');
    // 生成对应长度的星号，按每4位加空格分隔
    const maskedValue = '*'.repeat(rawValue.length).replace(/(.{4})/g, '$1 ').trim();
    // 更新掩码显示
    this.value = maskedValue;
    // 同步真实输入框的纯数字卡号
    realInput.value = rawValue;
  });

  // 处理粘贴事件，避免非数字内容混入
  maskedInput.addEventListener('paste', function(e) {
    e.preventDefault();
    const pastedText = (e.clipboardData || window.clipboardData).getData('text');
    const rawValue = pastedText.replace(/\D/g, '');
    const maskedValue = '*'.repeat(rawValue.length).replace(/(.{4})/g, '$1 ').trim();
    this.value = maskedValue;
    realInput.value = rawValue;
  });

  // 同步真实输入框的自动补全值到掩码框
  function syncMask() {
    const rawValue = realInput.value.replace(/\D/g, '');
    const maskedValue = '*'.repeat(rawValue.length).replace(/(.{4})/g, '$1 ').trim();
    maskedInput.value = maskedValue;
  }
</script>

关键细节说明 #

• 隐藏真实输入框：用绝对定位移到可视区域外（而非display: none），确保浏览器能识别该输入框并触发信用卡自动补全功能。
• 全程掩码显示：无论用户手动输入还是浏览器自动补全，可见输入框只会显示星号（*），按每4位加空格的格式排版，既符合信用卡号的视觉习惯，又完全隐藏真实数字。
• 值同步逻辑：真实输入框始终存储纯数字格式的信用卡号，方便表单提交时直接使用；可见掩码框仅负责显示，所有输入/粘贴操作都会被过滤为纯数字后同步到真实输入框。
• 兼容性处理：覆盖了手动输入、粘贴、浏览器自动补全等多种场景，确保所有操作下两个输入框的值保持一致。

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