如何实现输入框内卡号自动格式化？输入4位字符后自动插空格

当然可以实现这种输入格式化效果，下面是具体的前端实现方案：

核心思路 #

通过监听输入框的input事件，实时处理输入内容：去除所有非目标字符（比如空格或其他符号），然后按每4位一组插入空格，最后将格式化后的内容回填到输入框，同时修正光标位置避免错乱。

代码示例 #

<!-- 目标输入框 -->
<input type="text" id="cardInput" placeholder="请输入卡号">

<script>
const cardInput = document.getElementById('cardInput');

cardInput.addEventListener('input', function(e) {
  // 获取输入框内容并去除所有非数字字母、空格字符
  let value = e.target.value.replace(/\s/g, '').replace(/[^0-9a-zA-Z]/g, '');
  // 按每4位分割并添加空格
  let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value;
  // 保存光标位置偏移量，避免格式化后光标跳走
  const cursorOffset = formattedValue.length - e.target.value.length;
  const cursorPosition = e.target.selectionStart + cursorOffset;
  // 赋值格式化后的内容
  e.target.value = formattedValue;
  // 修正光标位置
  e.target.setSelectionRange(cursorPosition, cursorPosition);
});
</script>

额外说明 #

• 代码会自动将输入内容处理为XXXX XXXX XXXX的分组格式
• 支持删除、回退操作，光标位置会自动适配，不会出现错乱
• 如果仅需支持数字输入，可将正则修改为replace(/\s/g, '').replace(/[^0-9]/g, '')
• 可根据需求调整分组长度（比如修改/.{1,4}/g中的数字）

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