移动端不弹时间选择器，主因是ios 16.3及更早版本系统限制，会降级为无校验的文本输入；安卓chrome、edge及ios safari 16.4+则支持原生滚轮选择器。
移动端 <input type="time"> 不弹时间选择器？先看浏览器支持
绝大多数安卓 Chrome、Edge 和 iOS Safari 16.4+ 都支持原生时间选择器，但 iOS 16.3 及更早版本会降级为文本输入——用户只能手输 HH:MM，且不校验格式。这不是你代码写错了，是系统限制。
验证方法：在目标设备上直接访问 <input type="time"> 页面，观察是否弹出滚轮式时间选择器。若只出现软键盘，大概率是 iOS 版本过低或 Safari 设置禁用了表单控件。
- iOS
- 安卓 WebView（尤其旧版）：部分厂商定制内核可能忽略
type="time"，强制 fallback 到text - 微信内置浏览器（X5 内核）：默认不触发原生时间选择器，需加
inputmode="numeric"并配合pattern="[0-9]{2}:[0-9]{2}"引导软键盘
type="time" 必须配 step 和 value 才稳定
不设 step 时，iOS Safari 可能默认以 1 小时为粒度滚动；不设初始 value，某些安卓机型会显示空值并拒绝唤起选择器。
推荐写法：
<input type="time" step="300" value="09:00">
step="300" 表示 5 分钟一档（单位是秒），避免出现 09:07 这类非标准时间；value 必须是 HH:MM 格式（24 小时制），不能带秒或时区。
- 别用
step="60"（1 分钟）——iOS 滚轮太密，体验差 - 别写
value="9:0"或value="09:00:00"，会失效 - 服务端接收前仍要校验，因为用户可手动改 DOM 绕过前端限制
微信和 QQ 内置浏览器里怎么“骗”出时间选择器
X5 内核对 type="time" 支持极弱，但加上 inputmode 和 pattern 能提升软键盘匹配度，再配合 JS 监听输入做格式修正，比完全放弃原生控件更轻量。
<input type="time" inputmode="numeric" pattern="[0-9]{2}:[0-9]{2}">
同时用 JS 拦截非法输入：
input.addEventListener('input', e => {
const v = e.target.value.replace(/[^0-9:]/g, '');
if (/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/.test(v)) {
e.target.value = v.padStart(5, '0'); // 补零成 09:00
}
});
- 微信中
inputmode="numeric"会调出数字键盘，比默认键盘更接近时间输入场景 - 不要依赖
onchange，它在移动端常不触发；用input事件实时过滤 - 若项目允许引入第三方库，
flatpickr（开启enableTime: true）在 X5 中兼容性远好于原生
为什么加了 type="time" 还是弹不出？检查这三处
常见掉坑点不在 HTML 结构本身，而在上下文环境：
-
input被包裹在display: none或visibility: hidden的父容器里——即使后来 show，iOS 仍拒绝初始化原生控件 - 页面加载后通过 JS 动态插入
<input type="time">，未触发内核重绘（尤其是 Vue/React 的条件渲染） - CSS 中设置了
-webkit-appearance: none—— 这会直接干掉所有 WebKit 原生表单控件样式和行为
修复方式很简单：确保元素首次渲染即可见、静态写入 HTML（或用 key 强制重挂载）、删掉所有影响 appearance 的样式。
真要兼容老 iOS 或 X5，别硬扛原生，用轻量级 JS 时间选择器更省心。原生控件的“正确唤起”从来不是纯代码问题，而是目标环境、内核版本、甚至用户系统设置共同决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
