如何实现点击time类型input任意位置唤出时间选择器

原生type="time"的<input>元素默认仅点击右侧图标区域才会触发时间选择菜单，可通过以下两种方案调整： #

方案1：纯CSS实现（兼容性最佳） #

通过拉伸原生触发指示器覆盖整个输入框实现，无需修改JS逻辑：

对应HTML代码 #

<input id="appt-time" type="time" name="appt-time" value="13:30">

对应CSS代码 #

input[type="time"] {
  position: relative;
  /* 可自行添加原有输入框的样式定义 */
}

/* 适配Chrome、Edge、Safari等webkit内核浏览器 */
input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  background: transparent;
  cursor: pointer;
}

/* 适配Firefox浏览器 */
input[type="time"]::-moz-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: transparent;
  cursor: pointer;
}

原理说明 #

将浏览器默认生成的时间选择器触发图标拉伸至覆盖整个输入框区域，设置为透明状态，用户点击输入框任意位置都会触发该图标的默认点击事件，唤起时间选择器。该方案不会影响输入框的原有表单属性、默认值、键盘输入能力。 #

方案2：JS实现（灵活度更高） #

如果需要自定义交互逻辑，可以通过HTML5原生API主动唤起选择器：

对应JS代码 #

const timeInput = document.getElementById('appt-time');
timeInput.addEventListener('click', function() {
  timeInput.showPicker();
});

补充说明 #

• showPicker()是HTML5新增的表单API，支持Chrome 99+、Firefox 101+、Safari 14.1+，低版本浏览器可搭配方案1共同使用
• 如果需要禁止用户手动键盘输入，仅允许通过选择器选择时间，可在input标签上添加readonly属性：

  <input id="appt-time" type="time" name="appt-time" value="13:30" readonly>
  

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