如何实现时间选择器获焦弹出时才设置初始值？

完全可行，通过JavaScript监听输入框的聚焦事件，就能实现初始为空、点击弹出选择面板时再设置默认值的效果，具体实现步骤如下：

1. 初始HTML结构 #

首先保持时间输入框初始为空，不要设置value属性：

<input type="time" name="appt-time" id="appt-time">

2. JavaScript逻辑处理 #

监听输入框的focus事件（覆盖点击和键盘Tab聚焦两种场景），在第一次触发时设置默认时间，同时标记已设置避免重复赋值：

const timeInput = document.getElementById('appt-time');
let hasSetDefault = false;

timeInput.addEventListener('focus', () => {
  if (!hasSetDefault) {
    // 这里替换成你需要的默认时间，比如"14:30"
    timeInput.value = "14:30";
    hasSetDefault = true;
  }
});

扩展调整 #

如果需要用户每次打开选择面板都显示默认值（即使之前手动清空过），可以去掉hasSetDefault的判断逻辑，直接在聚焦时赋值：

const timeInput = document.getElementById('appt-time');

timeInput.addEventListener('focus', () => {
  timeInput.value = "14:30";
});

不过这种方式会覆盖用户之前的输入，需要根据实际需求选择。

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