HH:MM时间输入框如何禁止手动输入冒号 输2位自动填充冒号

核心实现目标 #

• 禁止用户手动输入冒号
• 输入2位小时数字后自动填充冒号
• 输出符合规范的HH:MM格式时间，无非法字符、无错位冒号

原有代码问题 #

原有逻辑仅处理了输入长度小于3时的冒号插入，没有做非法字符过滤，无法拦截用户在输入框任意位置手动输入的冒号，也没有处理粘贴、光标错位输入等场景的格式异常。

完整实现代码 #

基础输入框结构：

<input type="text" id="timeInput" placeholder="HH:MM" maxlength="5">

交互逻辑代码：

const timeInput = document.querySelector('#timeInput');

// 按键阶段直接拦截冒号输入，减少无效输入
timeInput.addEventListener('keydown', e => {
  if (e.key === ':' || e.key === '：') {
    e.preventDefault();
  }
});

timeInput.addEventListener('input', e => {
  // 过滤所有非数字内容，彻底清除手动输入的冒号、特殊符号、字母等非法内容
  let pureNumber = e.target.value.replace(/\D/g, '').slice(0, 4);
  let result = '';

  if (pureNumber.length >= 2) {
    // 处理小时段，最大不超过23
    let hour = pureNumber.slice(0, 2);
    hour = parseInt(hour) > 23 ? '23' : hour;
    result = `${hour}:`;
    // 处理分钟段，最大不超过59
    if (pureNumber.length > 2) {
      let minute = pureNumber.slice(2, 4);
      minute = parseInt(minute) > 59 ? '59' : minute;
      result += minute;
    }
  } else {
    result = pureNumber;
  }

  e.target.value = result;
});

逻辑说明 #

• 双重拦截非法冒号：keydown阶段直接阻止半角/全角冒号的输入行为，即使用户通过粘贴、自动填充等方式带入冒号，input阶段的非数字过滤规则也会把所有非数字字符（包括手动输入的冒号）全部清除，完全杜绝手动输入冒号的可能
• 自动补冒号逻辑不依赖光标位置：每次输入后都先提取纯数字内容再重新格式化，只要数字长度达到2位就自动在小时后拼接冒号，不会出现冒号错位、多冒号的问题
• 内置时间合法性校验：小时上限23、分钟上限59，不会生成不符合时间规则的内容
• 限制最大输入长度为5位，和HH:MM的格式长度完全匹配

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