本文介绍一种纯前端解决方案，通过监听 focus、change 和 blur 事件，实现当用户首次点击时间选择器时自动填充默认时间（例如 15:05），同时保证初始状态为空。用户手动修改后即锁定该值，失焦时若未做任何改动则自动清空，从而确保交互清晰且符合表单语义规范。
先分析一下实际场景。在 Web 表单中， 默认渲染后显示为空，这本身没有问题。但有时我们希望提供一个“引导性”的默认值——它不预先污染表单状态，只在用户主动交互（比如聚焦弹出时间选择器）时才出现。这样既能提升可用性，又能避免因误提交默认值而带来的风险。
下面这个方案轻量、无外部依赖，可以直接复制使用：
window.addEventListener('DOMContentLoaded', () => {
const defaultTime = '15:05'; // 可按需配置，建议使用 HH:mm 格式（24 小时制）
let isUserModified = false;
const timePicker = document.querySelector('[name="appt-time"]');
// 初始化：清除 defaultValue，确保初始为空
timePicker.defaultValue = '';
// 聚焦时：若尚未被用户修改，则设为默认值
timePicker.addEventListener('focus', () => {
if (!isUserModified && !timePicker.value) {
timePicker.value = defaultTime;
}
});
// 值变更时：标记为已修改
timePicker.addEventListener('change', () => {
isUserModified = true;
});
// 失焦时：若从未修改，恢复为空；否则同步到 defaultValue（便于重置逻辑）
timePicker.addEventListener('blur', () => {
if (!isUserModified && timePicker.value === defaultTime) {
timePicker.value = '';
} else if (isUserModified) {
timePicker.defaultValue = timePicker.value;
}
});
});
核心思路并不复杂，但有几个关键点值得深入说明：
- 通过
isUserModified标志位区分“默认填充”与“用户主动选择”，避免重复触发或相互覆盖。 - focus 事件中加入了
!timePicker.value判断，防止用户手动清空后再次聚焦时意外还原默认值。 - blur 阶段执行清理逻辑：未操作则清空；操作过则保留并更新
defaultValue，这样后续调用form.reset()能正常回退到用户修改后的值。 - 没有依赖
input事件——因为它过于敏感，容易频繁触发。只响应语义明确的change（提交确认）和blur（交互结束），更加稳健可靠。
使用过程中需要注意以下几个细节：
- 时间格式必须严格遵循
HH:mm（例如 '09:30'），否则 value 设置会无效。 - 移动端 Safari 对 focus 触发时机存在差异（部分版本需要点击输入框而非时钟图标），建议结合视觉反馈，比如使用 placeholder 提示“点击选择时间”，增强引导效果。
- 如果有时区或秒级精度需求，应改用
，并将格式调整为 '2024-01-01T15:05' 这种形式。
这个方案主打轻量、可复用，无需第三方库，兼容所有现代浏览器。它是提升时间输入体验的一个实用小技巧，非常适合表单优化场景。
