JS/jQuery信用卡到期日期自动补斜杠功能异常问题求助

问题说明 #

• 快速输入信用卡到期日期时，无法正确转换为MM/YY格式，出现格式错误
• 粘贴日期值时无法自动转换格式，添加paste事件未生效

原代码问题分析 #

1. 事件覆盖不全：仅绑定keyup/change/blur，未正确处理paste事件，且keyup在快速输入时会因为输入节奏导致中间状态处理出错
2. 全局event依赖：函数内直接使用全局event变量，而非传入的参数e，存在潜在冲突
3. 正则逻辑复杂且有漏洞：多轮正则替换的顺序和规则没有完全覆盖快速输入的所有场景，导致格式混乱

修复方案及代码 #

下面是优化后的代码，解决了上述问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<label>Expiration</label>
<div class="inline-fields">
  <input class="card-expiry" placeholder="MM / YY" type="tel" maxlength="5" x-autocompletetype="cc-exp" autocompletetype="cc-exp" autocorrect="off" spellcheck="off" autocapitalize="off">
</div>

$('.card-expiry').on('input blur paste', function(e) {
  if (e.type === 'paste') {
    e.preventDefault();
    // 获取剪贴板内容并过滤非数字字符
    const clipboardData = e.originalEvent.clipboardData || window.clipboardData;
    let pastedText = clipboardData.getData('text').replace(/\D/g, '');
    
    let formatted = '';
    // 按MM/YY格式处理粘贴内容
    if (pastedText.length >= 2) {
      formatted += pastedText.substring(0, 2) + '/';
      formatted += pastedText.substring(2, 4);
    } else {
      formatted = pastedText;
    }
    
    $(this).val(formatted.substring(0, 5));
    return;
  }
  formatCCExpiryDate(e);
});

function formatCCExpiryDate(e) {
  let value = e.target.value.replace(/\D/g, '');
  let formatted = '';

  if (value.length > 0) {
    // 处理月份：确保为01-12的有效格式
    let month = value.substring(0, 2);
    if (parseInt(month) > 12) {
      month = '12';
    } else if (month.length === 1) {
      month = '0' + month;
    }
    formatted += month;

    // 处理年份：最多取两位
    if (value.length > 2) {
      formatted += '/' + value.substring(2, 4);
    }
  }

  e.target.value = formatted.substring(0, 5);
}

修复要点说明 #

1. 事件优化：用input事件替代keyup，覆盖所有文本输入场景（快速输入、输入法输入等）；单独处理paste事件确保粘贴内容正确格式化
2. 粘贴处理逻辑：直接读取剪贴板内容，过滤非数字字符后按MM/YY规则重组，避免粘贴带分隔符或无效字符的内容出错
3. 格式化逻辑简化：先统一清除非数字字符，再分别处理月份和年份，确保月份始终是有效范围（01-12），年份仅保留后两位
4. 消除全局依赖：使用函数传入的e参数替代全局event，避免环境变量冲突

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