正确设置半小时步进需使用 step="1800"（30×60秒），step="30"或"00:30"无效；仅靠step无法阻止手动输入非法时间，须用JavaScript在change/blur事件中四舍五入校验；兼容性差时建议改用select下拉或flatpickr等库。
HTML <input type="time"> 怎么设置半小时步进
原生 <input type="time"> 支持 step 属性，但必须用秒数（不是“30分钟”这种文字）。设为 1800 才表示 30 分钟（30 × 60 = 1800 秒）。
常见错误是写 step="30" 或 step="00:30" —— 这两种都无效，浏览器会忽略或回退到默认步进（通常是 1 秒）。
正确写法：
<input type="time" step="1800">
-
step="1800"是唯一能触发半小时粒度的值；step="900"是 15 分钟，step="3600"是 1 小时 - 该属性只影响用户通过上下箭头或滚轮调整时的增量，不影响手动输入（手动仍可输任意时间，比如
09:17） - 部分旧版 Safari（≤15.4）不支持
step对type="time"的作用，需降级处理
怎么阻止用户手动输入非半小时的时间点
仅靠 step 无法约束手动输入。必须配合 JavaScript 校验和修正。
立即学习“前端免费学习笔记（深入）”；
核心思路：监听 change 和 blur，把不符合半小时间隔的时间（如 "09:17"）四舍五入到最近的半小时（"09:30"），或截断为向下取整（"09:00"）。
示例逻辑（使用 getHours() 和 getMinutes() 计算）：
const input = document.querySelector('input[type="time"]');
input.addEventListener('change', () => {
const [h, m] = input.value.split(':').map(Number);
const totalMinutes = h * 60 + m;
const rounded = Math.round(totalMinutes / 30) * 30; // 四舍五入到最近半小时
const newH = Math.floor(rounded / 60) % 24;
const newM = rounded % 60;
input.value = `${newH.toString().padStart(2, '0')}:${newM.toString().padStart(2, '0')}`;
});- 用
Math.round()是四舍五入（09:16 → 09:30，09:15 → 09:30）；若要向下取整，改用Math.floor() - 注意
input.value在为空时返回空字符串，需加判断避免split报错 - 移动端软键盘仍可能允许非法输入，所以校验不能只靠
input事件，change和blur更可靠
兼容性差怎么办？有没有更稳的替代方案
当目标环境包含 iOS Safari ≤15.4 或某些安卓 WebView 时，step 属性对 type="time" 基本失效，且系统时间选择器不响应步进设置。
此时推荐两个务实路径：
- 放弃原生
type="time"，改用下拉选择（<select>）列出所有半小时选项："00:00", "00:30", "01:00", … "23:30"—— 完全可控，无兼容问题 - 用轻量级 JS 时间选择器库（如
flatpickr或air-datepicker），配置step: 30（单位是分钟），它们内部自行处理渲染与校验 - 不推荐自研日历/时间弹窗——边界情况多（夏令时、AM/PM、24h 格式切换），容易翻车
为什么 min/max 和 step 组合有时不生效
三者必须满足数学一致性：从 min 开始，每次加 step，最终能到达或跨过 max，否则浏览器可能静默忽略 step。
例如：min="09:00"、max="17:00"、step="1800" 是合法的（09:00 → 09:30 → … → 17:00 正好覆盖）；但若写成 min="09:05"，则 09:05 + n×30min 永远得不到标准半小时点，部分浏览器会丢弃 step。
- 安全做法：始终让
min和max本身是半小时点（如"09:00"、"17:30"） -
min/max只限制可选范围，不参与步进计算逻辑 —— 它们只是起点和终点锚点 - Chrome 最新版本对此较宽容，但 Firefox 和 Safari 更严格，建议统一按“对齐半小时”来设值
实际项目里最容易被忽略的，是手动输入校验时机和跨浏览器步进一致性。别只测 Chrome，务必在真机 Safari 和主流安卓 WebView 上验证 step 是否真正起效。
