如何格式化表单输入框实现借记卡卡号合规输入与实时显示？

要实现的核心功能点：

• 只允许输入数字
• 最多输入16位数字
• 自动按四位一组添加空格（比如 1234 5678 9012 3456）
• 输入内容实时同步到侧边的卡片展示区域

完整代码实现 #

HTML结构 #

<!-- 卡片展示区域 -->
<div class="card-display">
  <div class="card-number">**** **** **** ****</div>
</div>

<!-- 输入区域 -->
<div class="input-area">
  <label for="card-input">请输入借记卡卡号</label>
  <input type="tel" id="card-input" maxlength="19" placeholder="1234 5678 9012 3456">
</div>

CSS样式（模拟借记卡外观） #

.card-display {
  width: 320px;
  height: 200px;
  background: linear-gradient(135deg, #2d3748, #1a202c);
  border-radius: 12px;
  padding: 24px;
  color: white;
  font-family: 'Courier New', monospace;
  margin-bottom: 24px;
}
.card-number {
  margin-top: 70px;
  font-size: 1.3rem;
  letter-spacing: 3px;
  text-align: center;
}
.input-area {
  width: 320px;
}
#card-input {
  width: 100%;
  padding: 10px;
  font-size: 1.1rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

JavaScript逻辑（核心处理） #

const cardInput = document.getElementById('card-input');
const cardNumberDisplay = document.querySelector('.card-number');

// 监听输入事件，实时格式化并同步
cardInput.addEventListener('input', function(e) {
  // 第一步：过滤所有非数字字符，只保留数字
  let rawValue = e.target.value.replace(/\D/g, '');
  
  // 第二步：限制最多16位数字，超过就截断
  if (rawValue.length > 16) {
    rawValue = rawValue.slice(0, 16);
  }
  
  // 第三步：把数字按每四位一组拆分，用空格连接
  const formattedValue = rawValue.match(/.{1,4}/g)?.join(' ') || '';
  
  // 处理光标位置：避免格式化后光标跳到末尾，影响输入体验
  const cursorPos = e.target.selectionStart;
  const originalLength = e.target.value.length;
  const newLength = formattedValue.length;
  const positionDiff = newLength - originalLength;

  // 更新输入框的值
  e.target.value = formattedValue;
  
  // 调整光标到正确位置
  if (cursorPos !== originalLength) {
    e.target.setSelectionRange(cursorPos + positionDiff, cursorPos + positionDiff);
  }
  
  // 同步到卡片展示区域
  cardNumberDisplay.textContent = formattedValue || '**** **** **** ****';
});

// 限制输入：只允许数字和必要的控制键（删除、方向键等）
cardInput.addEventListener('keydown', function(e) {
  const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
  // 允许数字键和控制键，其他按键阻止默认行为
  if (!allowedKeys.includes(e.key) && !(e.key >= '0' && e.key <= '9')) {
    e.preventDefault();
  }
});

你之前的循环方法失效的常见原因 #

1. 没过滤非数字字符：如果用户输入了字母、符号，循环分组时会把这些内容也加进去，导致格式混乱
2. 没处理光标位置：直接替换输入框内容会让光标跳到末尾，用户继续输入时逻辑会出错
3. 没截断超出长度的内容：超过16位数字后，分组逻辑会失效，导致格式不对
4. 同步逻辑缺失：可能没把格式化后的值实时更新到卡片展示区域

关键细节说明 #

• 用type="tel"：移动端会自动弹出数字键盘，更贴合卡号输入场景，同时浏览器会做基础的数字限制（但仍需JS二次过滤，防止复制粘贴非数字）
• 设置maxlength="19"：16位数字加上3个分隔空格，总长度刚好19，避免用户输入过多内容
• 光标位置调整：格式化后保持光标在原来的输入位置，让用户输入更顺畅
• 彻底过滤非数字：用replace(/\D/g, '')移除所有非数字字符，保证输入内容纯净

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