正确做法是监听 keydown 事件并调用 preventDefault() 拦截键盘输入，同时保留原生时间选择器功能；需额外禁用粘贴、change 校验格式，并对 iOS Safari 降级处理。
HTML 时间输入框（<input type="time">）默认允许键盘输入，但很多场景下你真正需要的是“只用时间选择器”，而不是让用户手动敲出 25:99 这种非法值。直接加 readonly 或 disabled 会破坏表单功能或交互逻辑，正确做法是保留元素可聚焦、可提交，仅拦截键盘输入行为。
为什么不能用 readonly 或 disabled
readonly 允许聚焦和复制，但用户仍能粘贴非法时间字符串（如 "abc" 或 "12:65"），且部分浏览器会忽略其对 type="time" 的限制；disabled 则直接让字段值不参与表单提交，还禁用焦点切换——这在需要校验或联动的表单里是硬伤。
-
disabled的值不会出现在FormData或form.submit()请求体中 -
readonly对type="time"的兼容性差，Chrome 会绕过它接受键盘输入，Safari 可能完全不响应 - 两者都无法阻止用户右键粘贴非法内容
用 keydown + preventDefault() 拦截所有按键
这是最轻量、兼容性最好的方案：监听 keydown，只要事件来自该输入框，就无条件阻止默认行为。注意必须用 keydown，input 或 keypress 已经晚了——非法字符可能已插入。
<input type="time" id="meetingTime">
<script>
const timeInput = document.getElementById('meetingTime');
timeInput.addEventListener('keydown', e => e.preventDefault());
</script>
- 不影响点击唤起原生时间选择器（iOS/Android/桌面 Chrome 都正常）
- 不干扰
tab切换焦点、Enter提交表单等基础操作 - 需搭配
min/max属性做业务层约束，否则用户仍可通过选择器选到无效时间
补充防御：禁用粘贴 + 强制格式校验
仅拦截键盘不够，用户可能粘贴 "14-30" 或 "2:30 PM"。需额外处理 paste 事件并校验值格式：
立即学习“前端免费学习笔记（深入）”；
timeInput.addEventListener('paste', e => {
e.preventDefault();
// 可选：从剪贴板读取后尝试标准化，或直接丢弃
});
timeInput.addEventListener('change', () => {
if (!/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/.test(timeInput.value)) {
timeInput.value = ''; // 清空非法值
}
});
-
paste事件中调用e.preventDefault()是必须的，否则粘贴内容会直接覆盖 -
change校验比input更稳妥：它只在用户确认选择（点选器确定、失焦、回车）后触发，避免高频校验干扰 - 正则
/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/匹配标准 24 小时制，不接受"02:5"或"2:05"这类省略前导零的写法（浏览器 native picker 不会产生这类值）
移动端 iOS Safari 的特殊处理
iOS Safari 对 type="time" 的支持较弱，部分机型点击后弹出的是数字键盘而非时间选择器。此时仅靠前端拦截无法解决，必须降级：
- 检测
navigator.userAgent中是否含"iPhone"或"iPad" - 若命中，改用
<input type="text" pattern="[0-2][0-9]:[0-5][0-9]">+ 前端 JS 校验，并提示“请使用系统时间选择器” - 不要依赖
ime-mode或inputmode="numeric"，它们对时间输入无实质约束力
真正难处理的不是“怎么禁”，而是“禁了之后用户还能否完成任务”。键盘输入被拦住，就必须确保原生选择器 100% 可用——这点在老旧 Android WebView 或某些企业内嵌浏览器里常翻车，上线前务必真机实测。
