信用卡输入框自动空格功能异常，求有效修复方案

原代码存在几个关键问题导致异常：

• 未声明position、length变量，造成全局变量污染且引发逻辑报错
• 绑定onkeydown事件时机错误，此时输入的字符还未同步到输入框值中
• 光标位置计算逻辑混乱，length变量未定义，判断条件不严谨

以下是修复后的完整代码：

HTML部分 #

<input id="cardnumber" placeholder="e.g. 1234 5678 9123 0000" maxlength="19" type="text">

JavaScript部分 #

const cardInput = document.getElementById('cardnumber');

cardInput.addEventListener('input', function(e) {
  // 保存当前光标位置
  const cursorPos = this.selectionStart;
  // 记录修改前的输入框值长度
  const originalLength = this.value.length;
  
  // 清理非数字/大写字母字符，并每4位添加空格
  this.value = this.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
  
  // 计算光标需要调整的偏移量
  const newLength = this.value.length;
  let offset = 0;
  // 输入字符时，处理新增空格带来的光标偏移
  if (newLength > originalLength && cursorPos > 0) {
    for (let i = cursorPos; i < newLength; i++) {
      if (this.value[i] === ' ') {
        offset++;
      }
    }
  }
  // 删除字符时，处理空格被删除带来的光标偏移
  else if (newLength < originalLength && cursorPos > 0) {
    for (let i = cursorPos - 1; i >= 0; i--) {
      if (this.value[i] === ' ') {
        offset--;
      }
    }
  }
  
  // 设置正确的光标位置
  this.selectionStart = this.selectionEnd = cursorPos + offset;
});

修复说明 #

1. 改用input事件，覆盖键盘输入、粘贴等所有输入场景，确保输入框值更新后再处理格式化
2. 声明所有变量避免全局污染，明确记录修改前后的输入框长度
3. 重新梳理光标位置计算逻辑，分别处理输入和删除两种场景，保证光标始终跟随用户输入位置，不会出现跳变或错位
4. 保留原有的字符过滤和每4位空格格式化逻辑，同时保证交互体验符合预期

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