如何用JavaScript实现信用卡有效期输入框自动添加/删除斜杠(/)

你原有代码的问题：仅处理了输入长度为2的场景，其余长度下会把输入框赋值为null，同时没有覆盖删除、多字符输入的逻辑，无法满足需求。

优化后实现代码 #

addSlashes(elementID) {
    const ele = document.getElementById(elementID)
    // 过滤非数字字符，只保留有效数字
    let value = ele.value.replace(/\D/g, '')
    let finalVal = ''

    if (value.length >= 2) {
        // 前两位拼接斜杠，后续最多保留2位年份数字
        finalVal = `${value.slice(0,2)}/${value.slice(2,4)}`
    } else {
        finalVal = value
    }

    // 优化：修复光标自动跳转到末尾的问题
    const cursorPos = ele.selectionStart
    ele.value = finalVal
    if (cursorPos === 2 && finalVal.length === 3) {
        ele.setSelectionRange(3, 3)
    } else if (cursorPos <= 2) {
        ele.setSelectionRange(cursorPos, cursorPos)
    } else {
        ele.setSelectionRange(cursorPos + 1, cursorPos + 1)
    }
}

调用方式 #

给输入框绑定input事件即可，示例代码：

<input type="text" id="expireDate" placeholder="MM/YY" oninput="addSlashes('expireDate')" maxlength="5">

功能适配说明 #

• 输入满2位数字后自动插入斜杠，符合你要求的输入23后得到23/的效果
• 删除时如果当前内容为23/4，删除数字4后会自动退化为23，自动移除斜杠
• 自动过滤非数字输入，限制最多输入5位字符，完全匹配信用卡MM/YY有效期的输入规则

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