keyup事件下实时更新卡号显示的前端功能实现求助

原代码问题分析 #

1. 全局keyup事件监听会响应所有按键，应该只绑定到卡号输入框
2. splice方法使用错误：第一个参数应为索引而非元素值，且循环中直接赋值splice结果会破坏展示文本结构
3. 逻辑冗余，没必要操作原展示文本的数组，直接基于输入值构建目标文本更高效

修正后的实现代码 #

const demoNum = document.querySelector('.demo-number');
const cardNum = document.getElementById('card-num');

// 监听输入框的input事件（支持键盘输入、粘贴等所有输入场景）
cardNum.addEventListener('input', () => {
  // 获取输入的纯数字，过滤非数字字符
  const inputValue = cardNum.value.replace(/[^0-9]/g, '');
  // 补全到16位，不足的用0填充，超过16位的截取前16位
  const fullCardNum = inputValue.padEnd(16, '0').slice(0, 16);
  // 分割成每4位一组，用空格连接
  const formattedNum = fullCardNum.match(/.{1,4}/g).join(' ');
  // 更新展示文本
  demoNum.textContent = formattedNum;
});

代码说明 #

• 使用input事件替代keyup，能覆盖键盘输入、鼠标粘贴、右键粘贴等所有输入场景，更可靠
• 先过滤输入中的非数字字符，确保只处理有效数字
• padEnd(16, '0')自动补全到16位，slice(0,16)确保不超过16位上限
• match(/.{1,4}/g)把16位数字分割成4组，每组4位，再用空格拼接成目标格式

测试效果 #

• 输入"234"时，展示文本自动变为2340 0000 0000 0000
• 输入满16位数字时，完整展示格式化后的卡号
• 删除输入内容时，自动补回0，保持默认格式结构

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