本文探讨在保持无障碍合规的前提下，安全禁用 Firefox 中 键盘输入的方法，并指出 readonly 和 onKeyDown 的局限性及更优替代方案。
本文探讨在保持无障碍合规的前提下，安全禁用 firefox 中 `` 键盘输入的方法，并指出 `readonly` 和 `onkeydown` 的局限性及更优替代方案。
Firefox 是少数默认允许用户通过键盘直接编辑 值的浏览器（其他如 Chrome、Safari 会忽略键盘输入，仅响应日历控件）。当开发者试图“禁用键盘输入”时，常误用 readonly（导致日历面板不可点击）或 onKeyDown={e => e.preventDefault()}（在 Firefox 中失效，因其对原生 date 输入的键盘事件捕获机制特殊）。
⚠️ 关键前提：不要强行禁用键盘输入
根据 WCAG 2.1 准则（Understanding Keyboard Accessible），所有功能必须可通过键盘操作完成。日期输入框的键盘支持（如 ↑/↓ 调整年份、Tab 导航、Enter 确认）是辅助技术（如屏幕阅读器）和键盘依赖用户的必需能力。移除它将直接违反 AA 级可访问性要求，损害合规性与用户体验。
✅ 推荐做法：保持原生行为，增强控制逻辑
若业务场景需限制用户手动输入（例如仅允许选择范围内的日期），应通过验证 + 反馈而非禁用输入来实现：
<input classname="date__input" type="date" key="{t.id}" value="{t.factStart?.toISOString().split('T')[0]" onchange="{(e)"> {
const selectedDate = new Date(e.target.value);
const minDate = new Date('2024-01-01');
const maxDate = new Date('2025-12-31');
if (selectedDate >= minDate && selectedDate
? 补充说明：
- 使用 min/max 属性可约束日历面板可选范围，Firefox 会自动禁用超出范围的日期按钮；
- setCustomValidity() 提供语义化错误提示，兼容屏幕阅读器；
- 若需完全隐藏原生日历图标（不推荐），应改用自定义日期选择器（如 React DatePicker），但务必自行实现完整键盘导航与 ARIA 标签；
- 永远优先信任原生 的可访问性实现——它是经过主流浏览器与辅助工具深度测试的成熟方案。
总之，与其“禁用键盘”，不如“引导正确输入”并“及时校验反馈”。这既符合法规要求，也真正提升了所有用户（包括残障人士）的操作效率与尊严。
