如何限制时分格式输入框数值范围：前两位≤24，后两位≤60

我有一个仅允许输入数字的文本输入框，已经实现输入前两位字符后自动添加冒号的功能。现在需要限制前两位数值不超过24，冒号后的两位数值不超过60。目前能在数值大于24时打印日志，也能拆分出前后两段数值，但无法实现两段数值的合法性校验，以下是修正后的解决方案：

完整代码 #

HTML #

<input type="text" id="inputbox">

JavaScript #

// 最大限制值
const maxHour = 24;
const maxMinute = 60;

const el = document.getElementById("inputbox");
// 设置输入框属性
el.setAttribute("maxlength", 5);
el.setAttribute("inputmode", "numeric");

el.addEventListener("input", (e) => {
    let value = e.target.value.replace(/[^0-9:]/g, ''); // 过滤非数字和冒号的字符
    
    // 处理自动添加冒号逻辑：当输入到第2位数字且还没冒号时添加
    if (value.length === 2 && !value.includes(':')) {
        value += ':';
    }
    
    // 拆分小时和分钟部分
    const [hourPart, minutePart] = value.split(':');
    
    // 校验小时部分
    if (hourPart && parseInt(hourPart, 10) > maxHour) {
        // 如果小时超过24，只保留合法部分（比如输入25就改成2）
        value = hourPart.slice(0, 1) + (value.includes(':') ? ':' : '') + (minutePart || '');
        console.log(`小时不能超过${maxHour}`);
    }
    
    // 校验分钟部分
    if (minutePart && parseInt(minutePart, 10) >= maxMinute) {
        // 分钟超过或等于60时，截断到合法长度（比如输入61改成6）
        value = `${hourPart || ''}:${minutePart.slice(0, 1)}`;
        console.log(`分钟不能超过${maxMinute - 1}`);
    }
    
    // 更新输入框值
    e.target.value = value;
});

关键修改说明 #

• 改用input事件替代keydown，能更好处理粘贴、输入法等场景的输入
• 实时过滤非法字符，确保输入只有数字和冒号
• 将小时和分钟的校验逻辑放到输入事件内部，每次输入后实时拆分并校验
• 当输入值超出限制时，自动截断到合法范围，同时给出日志提示
• 修复了原代码中初始值为空导致拆分无效的问题

内容的提问来源于stack exchange，提问作者Juan-man