HTML元素step属性怎么设置时间间隔-html教程-PHP中文网

input[type="time"]的step属性仅接受整数秒，15分钟需设为900；step值决定value格式：step≤60时value须含秒，否则被清空；浏览器不拦截手动输入非法时间，需js校验修正；旧版safari不支持step，须降级处理。

html元素step属性怎么设置时间间隔

time输入框的step必须是整数秒，不是“分钟”或“HH:MM”

浏览器对 input[type="time"] 的 step 属性只认**整数秒**，写 step="15" 或 step="00:15" 都无效——前者被当 15 秒，后者直接被忽略。要实现 15 分钟一档，必须换算：15 × 60 = 900；30 分钟就是 1800；1 小时是 3600。

常见错误包括：

误以为 step="30" 表示“30 分钟”，结果时间按秒跳（如 09:00:00 → 09:00:30）
用小数 step="900.0" 或带单位字符串（如 "900s"），浏览器静默丢弃该属性
设了 step="60"（即 1 分钟），但 value 写成 "09:30:45" —— 因为含秒，浏览器会清空值或回退到默认

step值直接影响value格式校验规则

step 不只是控制选择粒度，它还强制约束 value 字符串的格式。浏览器会根据 step 值决定是否接受你写的初始时间：

step 未设置或 step="60"（默认分钟级）→ value 必须是 "HH:MM" 格式，如 "14:30"；写 "14:30:00" 会被忽略
step="30" 或更小（含秒）→ value 必须带秒，如 "14:30:00"；写 "14:30" 会导致值为空或被截断
step="1" 是最小合法值；step="0.5" 或 step="900.5" 全部被忽略

仅靠step无法阻止手动输入非法时间

用户仍可键盘输入任意时间（比如 step="900" 时输 "09:07"），浏览器不会实时拦截。提交前可能触发 validity.stepMismatch，但行为不一致：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

Chrome / Edge：失焦或提交时自动四舍五入到最近合法点（"09:07" → "09:00"）
Safari（≤15.4）：可能完全忽略 step，也不做任何修正
Firefox：允许输入，但表单校验会报错，需 JS 主动读取并处理

真正可靠的做法是监听 change 或 blur，用 JS 校验并修正：

const timeInput = document.querySelector('input[type="time"]');
timeInput.addEventListener('change', () => {
  const [h, m] = timeInput.value.split(':').map(Number);
  const totalMin = h * 60 + m;
  const roundedMin = Math.round(totalMin / 15) * 15; // 按15分钟取整
  const rh = String(Math.floor(roundedMin / 60)).padStart(2, '0');
  const rm = String(roundedMin % 60).padStart(2, '0');
  timeInput.value = `${rh}:${rm}`;
});