无法真正隐藏<input type="time">的秒数，step="60"仅限制值粒度，UI仍显示；CSS伪元素隐藏仅限WebKit且损害可访问性；跨浏览器可靠方案是type="text"+JS格式化，并后端严格校验。
HTML <input type="time"> 默认显示秒数，但浏览器不提供原生隐藏选项
浏览器对 <input type="time"> 的渲染由系统控件决定，step、pattern 或 CSS 都无法真正「隐藏」秒数输入区域——它可能被禁用、不可编辑，但视觉上仍存在（尤其在 Chrome/Edge 中）。这是规范限制，不是 bug。
常见错误是以为加 step="60" 就能隐藏秒：它只让值以分钟为粒度变化，UI 上秒数滑块/下拉依然可见且可点。
-
step="60"：允许用户选 12:34:00、12:35:00… 但 UI 仍显示秒选择器 -
step="1"（默认）：秒可自由选；step="30"：秒只能选 :00 或 :30 —— UI 始终不消失 - CSS 如
input::-webkit-datetime-edit-second-field可隐藏秒字段，但仅限 WebKit，且破坏可访问性（屏幕阅读器仍会读出秒）
用 step="60" + CSS 隐藏 WebKit 秒字段（仅作视觉降级）
如果你只要求“看起来没秒”，且只支持 Chrome/Edge/Safari，可组合使用：
<input type="time" step="60" id="timeInput">
<style>
#timeInput::-webkit-datetime-edit-second-field {
display: none;
}
#timeInput::-webkit-datetime-edit-millisecond-field {
display: none;
}
</style>
注意：step="60" 是必须的，否则即使隐藏了 UI，用户仍可通过键盘输入秒（如输 14:25:33），导致值非法。该方案不适用于 Firefox（无对应伪元素），也不保证未来兼容。
立即学习“前端免费学习笔记（深入）”；
真正可靠的替代方案：用 <input type="text"> + JavaScript 格式化
当需要跨浏览器一致行为、可访问性或自定义交互时，放弃原生 time 输入框更实际。核心逻辑是：
- 用
<input type="text">接收用户输入 - 监听
input和blur，自动补全/修正为HH:MM格式 - 禁止输入秒（过滤
:第二次出现后的字符） - 用
pattern="[0-9]{1,2}:[0-9]{2}"和title提示格式
简单示例（无框架）：
<input type="text" id="timeText" pattern="[0-9]{1,2}:[0-9]{2}" title="请输入 HH:MM 格式，如 14:30">
<script>
const el = document.getElementById('timeText');
el.addEventListener('input', e => {
let v = e.target.value.replace(/\D/g, ''); // 只留数字
if (v.length >= 4) {
v = v.slice(0, 4);
v = v.slice(0, 2) + ':' + v.slice(2);
} else if (v.length === 3) {
v = v.slice(0, 1) + ':' + v.slice(1);
}
e.target.value = v;
});
</script>
后端/表单提交时务必做二次校验
前端任何隐藏或格式化都不可信。提交前 JS 校验只是体验优化，后端必须独立验证时间字符串是否符合 HH:MM 格式、小时 ≤ 23、分钟 ≤ 59。例如 Node.js 中用正则 /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/，Python 用 datetime.strptime(val, "%H:%M")。
别依赖 step="60" 或 CSS 隐藏就认为“秒已不存在”——用户禁用 JS、绕过前端、或直接发请求时，秒字段依然可能被传入。
