HTML5 time输入框：实现点击整个输入区域弹出时间选择器

嘿，我来帮你搞定这个问题！原生的<input type="time">控件在部分浏览器（比如Chrome、Edge）里默认只有点击右侧的时钟图标才会弹出时间选择菜单，这确实有点反直觉。不过不用依赖第三方插件，我们用几行原生JavaScript就能解决这个问题。

核心思路 #

利用HTML5原生的showPicker()方法，这个方法可以主动唤起输入框对应的选择器菜单。我们只需要给输入框绑定点击和聚焦事件，触发这个方法就行。

完整代码示例 #

你的原有HTML代码 #

<label for="first">{{__('From Hour')}}</label>
<input type="time" class="form-control input-md" name="" id="from_hour" value="">

新增的JavaScript代码 #

// 获取time输入框元素
const timeInput = document.getElementById('from_hour');

// 监听点击事件，点击输入框任意区域都唤起选择器
timeInput.addEventListener('click', () => {
  // 特性检测，避免旧浏览器报错
  if ('showPicker' in HTMLInputElement.prototype) {
    timeInput.showPicker();
  }
});

// 可选：监听聚焦事件，比如用户用Tab键切换到输入框时也唤起选择器
timeInput.addEventListener('focus', () => {
  if ('showPicker' in HTMLInputElement.prototype) {
    timeInput.showPicker();
  }
});

注意事项 #

• 浏览器兼容性：showPicker()方法支持Chrome 90+、Edge 90+、Safari 14.1+，如果需要兼容更老的浏览器，可以忽略这个特性（或者做降级处理，比如提示用户点击图标）。
• 权限限制：这个方法在跨域iframe或者某些特殊安全环境下可能无法调用，但常规的单页面应用或者静态页面里完全没问题。
• 原生体验：这种方法完全依赖浏览器原生的时间选择器，不会破坏原有样式和交互逻辑，只是补充了点击区域的触发范围。

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