如何用JavaScript实现卡号输入框每4位自动添加空格

直接上可运行的实现方案，兼顾输入体验和功能需求：

<input type="text" id="input-number" placeholder="e.g 1234 5678 9123 0000" maxlength="19" inputmode="numeric">

<script>
const input = document.getElementById('input-number');

input.addEventListener('input', function(e) {
  // 移除所有非数字字符，只保留卡号数字
  let value = e.target.value.replace(/\D/g, '');
  // 每4位数字拆分后用空格连接
  let formattedValue = value.match(/.{1,4}/g)?.join(' ') || '';
  // 限制总长度（16位数字+3个空格共19字符）
  formattedValue = formattedValue.slice(0, 19);
  
  // 处理光标位置，避免修改内容后光标跳至末尾
  const cursorPosition = e.target.selectionStart;
  const originalLength = e.target.value.length;
  const newLength = formattedValue.length;
  let newCursorPosition = cursorPosition + (newLength - originalLength);
  
  // 更新输入框内容并恢复光标位置
  e.target.value = formattedValue;
  e.target.setSelectionRange(newCursorPosition, newCursorPosition);
});
</script>

关键逻辑说明 #

• 输入过滤：用replace(/\D/g, '')清除所有非数字字符，确保输入框只保留卡号数字，避免用户手动输入的空格或符号干扰分段逻辑。
• 分段格式化：通过match(/.{1,4}/g)将数字按每4位一组拆分，再用join(' ')添加空格，输入过程中会自动适配长度——比如输入8位时显示1234 5678，输入满16位时自动变成完整的4组格式。
• 光标体验优化：修改输入框内容后默认光标会跳到末尾，这里通过计算光标前后的长度变化，手动恢复光标位置，让用户输入、删除操作时不会被打断。
• 场景适配：给input添加maxlength="19"限制总长度，inputmode="numeric"让移动端弹出数字键盘，更贴合银行卡号的输入场景。

补充说明 #

• 自动截断超出16位的数字，确保输入内容符合银行卡号长度要求。
• 支持删除操作：不管是删除单个数字还是空格，剩余内容都会自动重新格式化，保持分段格式。

内容的提问来源于stack exchange，提问作者Kazi Monirul Islam