信用卡有效期mm/yy格式输入删除时连带删除斜杠的实现问题

问题说明 #

现有实现输入两位月份后会自动添加斜杠/，但删除到斜杠位置时仅能单独删除斜杠，无法同时删除月份的最后一位，操作体验差。

解决方案代码 #

JS代码 #

let lastLength = 0;
$('#expiry').on('input', function(e) {
  // 仅保留输入的数字，过滤所有非法字符
  let currentVal = $(this).val().replace(/[^0-9]/g, '');
  const currentNumberLength = currentVal.length;

  // 处理删除斜杠时连带删除月份最后一位的逻辑
  if (currentNumberLength < lastLength && lastLength === 3 && currentNumberLength === 2) {
    currentVal = currentVal.slice(0, 1);
  }

  // 自动拼接斜杠，限制年份最多2位
  if (currentVal.length >= 2) {
    currentVal = `${currentVal.slice(0, 2)}/${currentVal.slice(2, 4)}`;
  }

  $(this).val(currentVal);
  lastLength = currentVal.length;
});

HTML代码（和原有逻辑一致） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="expiry" type="text" />

逻辑说明 #

• 输入过滤：每次触发输入事件时先清理所有非数字内容，避免用户输入字母、特殊符号等无效字符
• 删除判断：通过对比上一次内容长度和当前长度判断是否为删除操作，当删除前内容长度为3（即刚好是xx/格式），且删除后纯数字长度为2时，自动截断到第一位数字，实现斜杠和月份末位同步删除
• 格式补全：纯数字长度达到2位时自动拼接斜杠，同时限制年份最多输入2位，保证最终格式始终符合mm/yy规范
• 额外优化：支持用户选中多段内容批量删除，光标位置不影响删除逻辑的触发

内容的提问来源于stack exchange，提问作者Chieh YU WU