ReactJS实现信用卡有效期输入自动加斜杠编辑异常问题

• 核心问题出在第二条正则替换规则：replace(/(\d{2})/, '$1/')没有做长度判断，只要清理完斜杠的内容满2位数字，就会强制在末尾插入斜杠。当你删除内容到仅剩2位数字时，逻辑会自动补回斜杠，导致退格操作失效，卡在XX/的状态无法继续删除。
• 仅对斜杠做清理，没有过滤其他非数字字符，用户误输入字母、符号时会导致格式化逻辑异常。
• 没有处理光标位置，主动修改输入框value后浏览器默认会将光标移到末尾，在中间编辑内容时体验异常。

修复后代码 #

处理函数修改为如下逻辑：

changeInput(event) {
  const inputEl = event.target;
  const fieldName = inputEl.name;
  // 清理所有非数字字符，只保留数字
  let pureValue = inputEl.value.replace(/\D/g, '');
  // 最多保留4位数字，符合MMYY格式要求
  pureValue = pureValue.slice(0, 4);
  
  let formatValue = pureValue;
  // 数字长度≥2时才插入斜杠，避免长度为2时强制加斜杠导致删除卡住
  if (pureValue.length >= 2) {
    formatValue = `${pureValue.slice(0, 2)}/${pureValue.slice(2)}`;
  }

  // 修复光标跳转到末尾的问题
  const cursorPosition = inputEl.selectionStart;
  this.setState({ [fieldName]: formatValue }, () => {
    let newCursorPos = cursorPosition;
    // 光标在斜杠左侧时，插入斜杠后光标需要后移一位
    if (cursorPosition === 2 && formatValue.length > 2) {
      newCursorPos = cursorPosition + 1;
    } else if (cursorPosition > 2) {
      newCursorPos = cursorPosition + 1;
    }
    // 避免光标超出内容长度
    newCursorPos = Math.min(newCursorPos, formatValue.length);
    inputEl.setSelectionRange(newCursorPos, newCursorPos);
  });
}

输入框部分无需修改，保持原有配置即可：

<input 
  type="text" 
  inputMode="numeric" 
  id="cardDate" 
  name="cardDate" 
  value={this.state.cardDate} 
  autoComplete="off" 
  maxLength="5" 
  placeholder="MMYY" 
  onChange={this.changeInput.bind(this)} 
/>

优化点说明 #

• 用\D匹配所有非数字字符做清理，兼容用户误输入其他特殊字符的场景，鲁棒性更强。
• 增加长度判断，仅当数字长度≥3时才会最终显示带斜杠的格式，长度为2时不会强制加斜杠，完全解决删除卡顿的问题。
• 补充光标位置复位逻辑，编辑中间内容时不会出现光标自动跳转到末尾的问题。
• 提前截断4位数字，从逻辑层面保证格式符合要求，和maxLength属性做双重校验。

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