input[type="time"]的step属性仅接受整数秒，15分钟需设为900；step值决定value格式：step≤60时value须含秒，否则被清空；浏览器不拦截手动输入非法时间，需JS校验修正；旧版Safari不支持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}`;
});移动端和旧版 Safari 的兼容性必须降级处理
iOS/macOS Safari ≤15.4 完全不支持 type="time" 的 step，且会把整个输入框当作 type="text" 渲染——既无时间选择器，也无格式限制，min/max 全失效。
不能只靠 CSS 或 polyfill 补救，必须检测并降级：
- 用
document.createElement('input').type = 'time'判断基础支持 - 再检查
input.step是否能被正确读写（部分旧版虽支持 type，但 step 无效） - 不支持时，改用
select下拉（如每15分钟一个选项）或引入flatpickr等轻量库
最易被忽略的是：value 初始化必须匹配 step 规则，否则在 Chrome 中会静默修正、拖不动、箭头失灵——这不是 bug，是浏览器按规范做的隐式对齐。
