哈哈，这个问题我之前也碰到过！核心原因是你用了input事件——它会在用户每敲一个字符就触发，而time类型的输入框本身会自动补全格式（比如输入单个数字小时会自动变成0X），导致你的取整逻辑在用户还没输完两位数小时的时候就提前修改了值，自然会出现输入12变成01再02的尴尬情况。

下面给你几个不同思路的解决方案，按需选择：

方案1：改用change事件（最简单友好） #

把监听的事件从input改成change，这样只有当用户完成输入并离开输入框时，才会触发取整逻辑。用户可以完整输入任意时间，之后自动修正到最近的xx:00或xx:30，完全不干扰输入过程。

const timeInputs = document.querySelectorAll('input.test1, input.test2');
const roundToHalfHour = e => {
  let [hours, minutes] = e.target.value.split(':');
  // 处理用户还没输入完整时间的情况
  if (!minutes) return;
  
  minutes = parseInt(minutes, 10);
  hours = parseInt(hours, 10);
  
  if (minutes < 15) {
    minutes = 0;
  } else if (minutes > 44) {
    minutes = 0;
    // 处理23点进位的情况，避免出现24:00，自动转成00:00
    hours = (hours + 1) % 24;
  } else {
    minutes = 30;
  }
  
  // 格式化两位数的小时和分钟
  e.target.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
}

timeInputs.forEach(input => {
  input.addEventListener('change', roundToHalfHour);
});

<input class="test1" type="time">
<input class="test2" type="time">

方案2：实时限制输入（配合input事件+正则验证） #

如果想要实时让用户只能输入符合要求的时间，同时允许正常输入两位数小时，可以在input事件里加入正则判断，先允许用户完成输入，再修正不符合的分钟部分。另外给time输入框加上step="1800"（30分钟=1800秒），让点击上下箭头时直接跳30分钟，体验更流畅：

const timeInputs = document.querySelectorAll('input.test1, input.test2');
const enforceHalfHour = e => {
  let value = e.target.value;
  // 匹配合法的输入状态：比如HH:、HH:0、HH:00、HH:3、HH:30等
  const validInputPattern = /^([01]\d|2[0-3]):?(00?|30?)?$/;
  
  // 如果当前输入不符合基本格式，自动修正到最近的合法值
  if (!validInputPattern.test(value)) {
    let [hours, minutes] = value.split(':');
    if (hours && minutes) {
      minutes = parseInt(minutes, 10);
      hours = parseInt(hours, 10);
      
      if (minutes < 15) minutes = 0;
      else if (minutes > 44) {
        minutes = 0;
        hours = (hours + 1) % 24;
      } else minutes = 30;
      
      e.target.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
    }
    return;
  }
  // 合法输入状态下，不做修改，让用户继续输入
}

timeInputs.forEach(input => {
  input.addEventListener('input', enforceHalfHour);
});

<input class="test1" type="time" step="1800">
<input class="test2" type="time" step="1800">

方案3：自定义下拉选择（彻底限制输入） #

如果场景要求必须完全禁止用户手动输入，只能选择预设的xx:00或xx:30，可以把输入框改成下拉选择框，用JS自动生成所有合法选项：

<select class="half-hour-select" name="time1"></select>
<select class="half-hour-select" name="time2"></select>

const selects = document.querySelectorAll('.half-hour-select');
selects.forEach(select => {
  for (let hour = 0; hour < 24; hour++) {
    const hourStr = hour.toString().padStart(2, '0');
    // 添加xx:00选项
    const option00 = document.createElement('option');
    option00.value = `${hourStr}:00`;
    option00.textContent = `${hourStr}:00`;
    select.appendChild(option00);
    
    // 添加xx:30选项
    const option30 = document.createElement('option');
    option30.value = `${hourStr}:30`;
    option30.textContent = `${hourStr}:30`;
    select.appendChild(option30);
  }
});

这个方案彻底避免了输入错误的可能，但牺牲了手动输入的灵活性，适合严格管控的场景。

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