原生 仅支持 hh:mm 或 hh:mm:ss 格式，不支持毫秒、时区、am/pm；输秒需手动输入且浏览器兼容性差，毫秒必须用 type="text" + js 自定义校验与格式化。
time 输入框默认只允许 HH:MM 格式，不能输秒或毫秒
浏览器原生 <input type="time"> 严格按 HTML 标准解析：只接受 HH:MM 或 HH:MM:SS（部分浏览器支持秒，但非强制），且不接受毫秒、时区、AM/PM。哪怕你手动在输入框里敲 14:30:25.123，input.value 也会被自动截断为 "14:30:25"，毫秒直接丢弃。
这是因为 time 的 value 值必须符合 HTML 时间格式规范：仅支持 HH:MM 或 HH:MM:SS，中间不能有空格、字母或小数点。
- Chrome、Edge 支持
HH:MM:SS，但需用户手动输入冒号和秒数（无 UI 秒选择器） - Safari 目前仍只识别
HH:MM，输秒会被忽略或触发input事件后立即重置 - 所有浏览器都会拒绝
14:30:25.123或2:30 PM，并清空或回退到上一个有效值
想输秒或毫秒？必须用 text + 自定义校验
原生 time 控件无法扩展精度。真要支持秒级甚至毫秒级输入，得放弃 type="time"，改用 type="text"，再靠 JavaScript 控制格式和合法性。
关键不是“改规则”，而是“绕过规则”——用文本框承载自由输入，再用 JS 拦截、修正、标准化。
- 监听
input事件，用正则实时过滤非法字符：/[^0-9:.]/g - 输入过程中自动补全分隔符：如输入
1430后自动转成14:30；输入143025补成14:30:25 - 对最终值做语义校验：小时 ≤ 23，分钟/秒 ≤ 59，毫秒 ≤ 999
- 提交前把字符串转成
new Date()或 ISO 时间片段（如"14:30:25.123"），后端决定是否接收
<input type="text" id="custom-time" placeholder="HH:MM:SS.mmm"><script>
const el = document.getElementById('custom-time');
el.addEventListener('input', e => {
let v = e.target.value.replace(/[^0-9:.]/g, '');
// 简单补全逻辑（仅示意，生产环境需更健壮）
if (v.length === 4 && !v.includes(':')) v = v.slice(0,2) + ':' + v.slice(2);
if (v.length === 6 && v.split(':').length === 2) v = v + ':';
e.target.value = v;
});
</script>
使用 step 属性控制可选时间粒度（仅对原生 time 有效）
step 属性能影响点击上下箭头时的增减单位，但它**不改变输入格式规则**，也不开放秒/毫秒的手动输入权限。
-
step="1"：箭头每次增减 1 秒（Chrome/Edge 支持，Safari 忽略） -
step="300"（5 分钟）：常见于预约系统，避免用户选太细的时间点 -
step对键盘输入无效 —— 用户仍只能输HH:MM或HH:MM:SS，输14:30:25.123还是会被截断
所以别指望 step="0.001" 实现毫秒调节 —— 浏览器根本不认这个值，会 fallback 到默认的 60 秒。
移动端软键盘适配差，别依赖原生 time 的 UI
Android Chrome 的 time 输入框会唤起滚轮时间选择器，但只显示时和分；iOS Safari 的选择器连秒都不显示，且无法通过属性开启。用户想输秒，只能切出软键盘手动打，此时又撞上前面说的格式限制。
实际项目中，如果业务明确需要秒级精度（比如视频剪辑时间码、工时打卡毫秒级记录），原生控件从体验到能力都不可靠。
- 不要给
type="time"加pattern或oninput试图“修复”输入 —— 大部分行为由浏览器 UA 样式和内部 parser 控制，JS 拦不住 - 若必须保有“时间感”，可用
type="text"+ 图标按钮唤起自定义时间选择器（如 flatpickr、tempusdominus），自己控制精度和格式输出 - 表单提交前务必服务端二次校验：前端任何格式化都可能被绕过
真正难的不是写正则或补冒号，而是统一各端行为、覆盖所有边界输入（比如粘贴、拖拽、IME 输入），以及让无障碍工具（如屏幕阅读器）能正确播报精度信息 —— 这些细节容易被忽略，但上线后就是线上 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
