如何用JavaScript实现文本输入框onChange时自动格式化为HH:MM:SS格式

功能说明 #

实现要求的输入自动格式化逻辑：

• 初始默认值为 00:00
• 仅允许输入数字，自动过滤其他字符
• 输入数字从右往左自动填充，按位数自动补冒号，最大支持6位数字的HH:MM:SS格式
• 小时、分钟、秒数值最大限制为59，超出自动修正为59

完整代码示例 #

<!-- HTML部分 -->
<input type="text" id="timeInput" value="00:00">

// JavaScript部分
const timeInput = document.getElementById('timeInput');
// 记录上一次合法的数值，避免输入非法值后光标跳动
let lastValidValue = '0000';

timeInput.addEventListener('input', function(e) {
  // 过滤所有非数字字符
  let nums = e.target.value.replace(/\D/g, '');
  // 最多保留6位数字
  nums = nums.slice(-6);
  
  // 处理空输入的情况
  if (!nums) {
    e.target.value = '00:00';
    lastValidValue = '0000';
    return;
  }

  let formatted = '';

  // 按数字长度处理格式
  if (nums.length <= 4) {
    // 不足4位前面补0，格式为MM:SS
    const padded = nums.padStart(4, '0');
    let mm = parseInt(padded.slice(0, 2), 10);
    let ss = parseInt(padded.slice(2, 4), 10);
    // 数值校验
    mm = Math.min(mm, 59);
    ss = Math.min(ss, 59);
    // 补0格式化
    formatted = `${mm.toString().padStart(2, '0')}:${ss.toString().padStart(2, '0')}`;
    lastValidValue = `${mm.toString().padStart(2, '0')}${ss.toString().padStart(2, '0')}`;
  } else {
    // 长度5/6位，格式为HH:MM:SS，不足6位前面补0
    const padded = nums.padStart(6, '0');
    let hh = parseInt(padded.slice(0, 2), 10);
    let mm = parseInt(padded.slice(2, 4), 10);
    let ss = parseInt(padded.slice(4, 6), 10);
    // 数值校验
    hh = Math.min(hh, 59);
    mm = Math.min(mm, 59);
    ss = Math.min(ss, 59);
    // 补0格式化
    formatted = `${hh.toString().padStart(2, '0')}:${mm.toString().padStart(2, '0')}:${ss.toString().padStart(2, '0')}`;
    lastValidValue = `${hh.toString().padStart(2, '0')}${mm.toString().padStart(2, '0')}${ss.toString().padStart(2, '0')}`;
  }

  // 赋值格式化后的内容
  e.target.value = formatted;
});

逻辑验证 #

完全匹配给出的输入示例：

• 输入1位数字1 → 输出 00:01
• 输入2位数字12 → 输出 00:12
• 输入3位数字123 → 输出 01:23
• 输入4位数字1234 → 输出 12:34
• 输入5位数字12345 → 输出 01:23:45
• 输入6位数字123456 → 输出 12:34:56
• 输入超过59的数值比如61 → 自动修正为 00:59

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