本文介绍一种巧妙的 javascript 方案，通过监听 focus、change 和 blur 事件，实现在用户首次点击时间选择器时自动填充默认时间（如 15:05），而初始状态保持为空；若用户未修改即失焦，则清空值，确保表单语义清晰、用户体验自然。
本文介绍一种巧妙的 javascript 方案，通过监听 focus、change 和 blur 事件，实现在用户首次点击时间选择器时自动填充默认时间（如 15:05），而初始状态保持为空；若用户未修改即失焦，则清空值，确保表单语义清晰、用户体验自然。
在 Web 表单中，<input type="time"> 元素默认会显示当前时间（取决于浏览器实现）或空值，但原生行为无法满足“仅当用户主动聚焦才预设默认值”的交互需求。直接设置 value 属性会导致初始渲染即显示时间，违背“空态优先”设计原则；而单纯依赖 defaultValue 又无法动态触发。
以下方案采用事件驱动逻辑，精准控制默认值的注入时机：
window.addEventListener('DOMContentLoaded', () => {
const defaultTime = '15:05'; // 可按需配置，默认时间（24小时制，格式 HH:MM）
let isModified = false;
const timePicker = document.querySelector('[name="appt-time"]');
// 清除初始 defaultValue，避免干扰
timePicker.defaultValue = '';
// 聚焦时：若尚未修改，则注入默认值
timePicker.addEventListener('focus', (e) => {
if (!isModified) {
e.target.value = defaultTime;
}
});
// 更改时：标记已修改，防止后续聚焦覆盖用户输入
timePicker.addEventListener('change', (e) => {
isModified = true;
});
// 失焦时：若从未修改，则清空（回归空状态）；否则保存当前值为新的 defaultValue
timePicker.addEventListener('blur', (e) => {
if (!isModified) {
e.target.value = '';
} else {
e.target.defaultValue = e.target.value;
}
});
});配套 HTML 结构（无需额外属性）：
<input type="time" name="appt-time">
✅ 关键设计说明：
- 初始 DOM 加载后 value 为空字符串，视觉上完全空白；
- 首次 focus 触发默认时间填充，用户立即看到可编辑的预设值；
- change 事件仅在用户通过控件明确选择/输入后触发（非 input，因时间选择器的 input 事件兼容性差且易误判），确保 isModified 标志准确反映用户意图；
- blur 阶段清理逻辑保障：未操作即离开 → 恢复空值；已操作则保留并更新 defaultValue，便于后续重置（如表单 reset）。
⚠️ 注意事项：
- 时间格式必须严格为 HH:MM（如 '09:30'），否则赋值无效；建议服务端或初始化时校验；
- 此方案不依赖第三方库，兼容所有支持 <input type="time"> 的现代浏览器（Chrome、Firefox、Edge ≥79、Safari ≥14.1）；
- 若需支持键盘输入场景（如手动键入时间），可补充监听 input 事件并同步更新 isModified，但需注意 Safari 对 input 事件在 time 输入框中的支持较晚（iOS 15.4+）。
该实现兼顾语义化、可访问性与交互直觉，在保持原生控件轻量性的前提下，精准达成“懒加载默认值”的产品需求。
