如何为时间选择器实现“聚焦时自动填充默认值”的交互效果-html教程-PHP中文网

如何为时间选择器实现“聚焦时自动填充默认值”的交互效果

本文介绍一种纯前端方案，通过监听 focus、change 和 blur 事件，使在首次获得焦点时才显示默认时间（如 15:05），保持初始为空；用户一旦手动修改，即锁定该值，失去焦点后若未改动则清空，确保语义清晰、体验自然。

本文介绍一种纯前端方案，通过监听 focus、change 和 blur 事件，使 `` 在首次获得焦点时才显示默认时间（如 15:05），保持初始为空；用户一旦手动修改，即锁定该值，失去焦点后若未改动则清空，确保语义清晰、体验自然。

在表单设计中，常需平衡“引导性”与“简洁性”：既希望为用户提供合理默认建议（如常用就诊时段），又不想让未操作的字段预填值干扰数据真实性或校验逻辑。原生不支持 placeholder，且 value 属性设为初始值会导致 DOM 加载即显示——这与“仅在聚焦时呈现默认值”的需求相悖。

以下是一个轻量、可靠、无需依赖框架的 JavaScript 实现：

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

window.addEventListener('DOMContentLoaded', () => {
  const DEFAULT_TIME = '15:05'; // 可按需调整，格式必须为 'HH:mm'
  let isUserModified = false;
  const timePicker = document.querySelector('[name="appt-time"]');

  // 清除初始 defaultValue，避免回退/重置时干扰
  timePicker.defaultValue = '';

  // 首次聚焦：仅当用户尚未修改，才填入默认值
  timePicker.addEventListener('focus', () => {
    if (!isUserModified && !timePicker.value) {
      timePicker.value = DEFAULT_TIME;
    }
  });

  // 用户主动更改值 → 标记为已修改
  timePicker.addEventListener('change', () => {
    isUserModified = true;
  });

  // 失去焦点时清理逻辑：
  // - 若从未修改且当前值仍为默认值 → 清空（保持“未填写”状态）
  // - 若已修改 → 同步更新 defaultValue，确保 form.reset() 行为符合预期
  timePicker.addEventListener('blur', () => {
    if (!isUserModified && timePicker.value === DEFAULT_TIME) {
      timePicker.value = '';
    } else if (isUserModified) {
      timePicker.defaultValue = timePicker.value;
    }
  });
});

✅ 关键设计说明：