如何获取type=time输入框的非有效状态显示值

为什么原生value拿不到部分输入的显示值 #

原生<input type="time">控件的value属性仅在输入内容符合有效时间格式片段时才会返回值（比如完整的小时或完整的小时+分钟组合）。当处于1-:--这类未完成的输入状态时，浏览器判定输入内容无效，value会保持为空字符串。而UI上的动态显示是浏览器原生控件的内部渲染逻辑，不会同步到value属性中。

可行的两种实现方式 #

方式1：通过Shadow DOM读取内部显示内容（兼容性有限） #

现代浏览器的原生时间输入框基于Shadow DOM实现，可尝试访问其内部文本元素获取当前显示内容。但不同浏览器的Shadow DOM结构差异极大，仅适合测试场景，不推荐生产环境使用：

const timeInput = document.querySelector('input[type="time"]');
timeInput.addEventListener('keyup', () => {
  const shadowRoot = timeInput.shadowRoot;
  if (shadowRoot) {
    // 仅适配Chrome/Edge，Firefox等浏览器结构不同
    const displayText = shadowRoot.querySelector('.time-input').textContent;
    console.log(displayText); // 输出类似"1-:--"的内容
  }
});

方式2：手动维护输入状态（推荐，兼容性好） #

通过监听按键事件，自行跟踪用户输入操作，模拟原生控件的显示格式构建状态字符串。核心逻辑是限制输入为数字和退格键，按小时两位、分钟两位的规则填充未输入位置为-：

const timeInput = document.querySelector('input[type="time"]');
let displayValue = '--:--';

timeInput.addEventListener('keydown', (e) => {
  // 仅允许数字和退格键
  const allowedKeys = ['0','1','2','3','4','5','6','7','8','9','Backspace'];
  if (!allowedKeys.includes(e.key)) {
    e.preventDefault();
    return;
  }

  const currentChars = displayValue.replace(/:/g, '').split('');
  let cursorPos = timeInput.selectionStart;

  // 处理退格操作
  if (e.key === 'Backspace') {
    if (cursorPos > 0) {
      cursorPos--;
      if (cursorPos === 2) cursorPos--; // 跳过冒号位置
      currentChars[cursorPos] = '-';
    }
  } 
  // 处理数字输入
  else {
    if (cursorPos === 2) cursorPos++; // 跳过冒号位置
    if (currentChars[cursorPos] === '-') {
      currentChars[cursorPos] = e.key;
      // 自动移动光标
      cursorPos++;
      if (cursorPos === 2) cursorPos++;
    }
  }

  // 重新拼接显示字符串
  displayValue = `${currentChars[0]}${currentChars[1]}:${currentChars[2]}${currentChars[3]}`;
  console.log(displayValue); // 输出当前模拟的显示值
});

该方法完全可控，兼容所有支持type="time"的浏览器，且能精准匹配原生显示规则。

注意事项 #

• 不要直接修改输入框的value属性（会破坏原生控件的默认行为），若需展示模拟值，可在输入框旁添加独立元素显示。
• 当用户完成有效输入时，原生input事件会触发，此时可通过event.target.value获取标准格式的时间字符串。

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