Chrome浏览器中<input type="time">选择分钟或秒后自动关闭的实现

Chrome原生的<input type="time">下拉选择框默认仅支持点击空白区域关闭，无法在选择分钟（无秒数配置时）或秒数（含秒数配置时）后自动收起。由于input事件无法直接判断当前选中的时间分段，可通过监听控件的Shadow DOM元素事件来实现需求。

实现思路 #

1. 监听输入框的focus事件，标记下拉框处于打开状态，并获取Chrome时间选择器的Shadow DOM节点，监听其中的点击操作以记录最后选中的时间分段（分钟/秒）。
2. 通过input事件触发时，根据输入框值的长度判断是否包含秒数（带秒的格式为HH:MM:SS，长度为8；不带秒的为HH:MM，长度为5）。
3. 结合记录的选中分段，若满足「选完分钟（无秒）」或「选完秒（有秒）」的条件，手动触发blur()关闭下拉框。

代码示例 #

<input type="time" id="autoCloseTimeInput">

<script>
const timeInput = document.getElementById('autoCloseTimeInput');
let isPickerOpen = false;
let lastSelectedSegment = '';

// 监听输入框获得焦点，标记下拉框打开并监听选择器内的点击
timeInput.addEventListener('focus', () => {
  isPickerOpen = true;
  // 获取Chrome时间选择器的Shadow DOM容器（需根据Chrome版本调整选择器）
  const timePicker = document.querySelector('input[type="time"]')
    .getRootNode().host.parentNode.querySelector('#time-selector');
  
  if (timePicker) {
    // 监听选择器内的点击，记录选中的时间分段
    const handlePickerClick = (e) => {
      const targetClass = e.target.className;
      if (targetClass.includes('minute')) {
        lastSelectedSegment = 'minute';
      } else if (targetClass.includes('second')) {
        lastSelectedSegment = 'second';
      }
    };
    timePicker.addEventListener('click', handlePickerClick);
    // 下拉框关闭后移除监听
    timeInput.addEventListener('blur', () => {
      timePicker.removeEventListener('click', handlePickerClick);
    }, { once: true });
  }
});

// 监听输入变化，判断是否需要关闭下拉框
timeInput.addEventListener('input', () => {
  if (!isPickerOpen) return;

  const hasSeconds = timeInput.value.length === 8;
  // 满足条件则触发blur关闭下拉框
  if ((!hasSeconds && lastSelectedSegment === 'minute') || 
      (hasSeconds && lastSelectedSegment === 'second')) {
    timeInput.blur();
    isPickerOpen = false;
    lastSelectedSegment = '';
  }
});

// 监听失去焦点，重置状态
timeInput.addEventListener('blur', () => {
  isPickerOpen = false;
  lastSelectedSegment = '';
});
</script>

注意事项 #

• Chrome的原生时间选择器Shadow DOM结构可能随版本更新变化，若上述选择器失效，可通过开发者工具（F12）查看最新的元素类名或层级结构，调整代码中的选择器逻辑。
• 该方案仅针对Chrome浏览器，其他浏览器的原生时间控件结构不同，需单独适配。

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