time输入框不生效的根本原因是浏览器原生支持不一致，需手动处理兼容性、step粒度、值格式及移动端适配。
time 输入框在表单里为什么总不生效
根本原因通常是浏览器对 <input type="time"> 的原生支持虽广，但行为不一致：Safari 旧版本不渲染时间选择器、Android WebView 可能回退为文本框、部分国产浏览器直接忽略 step 属性。它不是“写完就能用”，而是“写完得验行为”。
实操建议：
- 必须加
required和value（哪怕空字符串），否则 Chrome/Firefox 在某些表单提交逻辑中会跳过校验 - 不要依赖
min/max做强约束——它们只影响 UI 选择范围，用户仍可手动输入非法值，后端必须二次校验 - 若需兼容 Safari 15.4 以下或微信内置浏览器，得准备降级方案（如两个
<select>或第三方库）
如何让 time 输入框真正符合业务时间粒度
<input type="time"> 默认按分钟粒度，但很多场景要 15 分钟一档（如会议室预约）、30 分钟（如体检时段）。靠 step 属性控制，但注意单位是秒，且必须是 60 的整数倍。
示例：只允许选择 :00 和 :30 的时间点
立即学习“前端免费学习笔记（深入）”；
<input type="time" step="1800" value="09:00">
常见错误：
-
step="30"❌（单位错，会被忽略，浏览器当默认 minute 处理） -
step="900"✅（15 分钟 = 900 秒，Chrome/Firefox 支持；但 Safari 仅支持step="60"或"300"等有限值） - 设了
step却没设value，初始值可能被截断为00:00，导致用户第一眼看到错误默认值
获取和提交 time 值时的格式陷阱
用户选中 14:30，JavaScript 读 input.value 得到的是 "14:30" 字符串，不是 Date 对象，更不是时间戳。后端接收时也只认这个格式（ISO 8601 的 time-only 子集），别指望自动转成带日期的完整时间。
关键点：
- 提交表单时，该字段值就是纯
HH:MM（24 小时制），不会附带时区——服务端需明确按本地时区解析，或前端补全日期再传 ISO 字符串 - JS 中想转成毫秒数？必须拼一个日期：
new Date(`2000-01-01T${input.value}`)，否则new Date("14:30")在不同浏览器解析结果可能不同 - 如果表单用
FormData提交，get()拿到的仍是字符串，不是File或Blob类型
移动端真机测试最容易漏掉的三件事
开发时在桌面 Chrome 调试没问题，一上真机就出问题：iOS 用户看不到滚轮、安卓部分厂商键盘弹出后遮挡输入框、微信里点击无反应。这些不是 bug，是平台限制。
必须检查：
- 是否加了
inputmode="numeric"？它能让软键盘优先显示数字键，减少用户手动输入错误 - 是否设置了
autocomplete="off"？某些 Android 浏览器会把历史时间填进time输入框，覆盖用户当前选择 - 是否监听了
change而非input？移动端选择器确认后才触发change，input在手动输入时才有用，混用会导致逻辑断层
time 输入框的边界比看起来窄得多——它只管“怎么选”，不管“选得对不对”“选了怎么用”。所有校验、格式化、降级逻辑都得自己补全，不能交给浏览器兜底。
