本文探讨在保持无障碍合规的前提下，安全禁用 Firefox 中 <input type="date"> 键盘输入的方法，并指出 readonly 和 onKeyDown 的局限性及更优替代方案。
本文探讨在保持无障碍合规的前提下，安全禁用 firefox 中 `` 键盘输入的方法，并指出 `readonly` 和 `onkeydown` 的局限性及更优替代方案。
Firefox 是少数默认允许用户通过键盘直接编辑 <input type="date"> 值的浏览器（其他如 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 <= maxDate) {
handleChangeInput(e, index, 'factStart');
} else {
// 触发视觉反馈（如边框变红、显示提示）
e.target.setCustomValidity('请选择2024–2025年之间的有效日期');
e.target.reportValidity();
// 可选：回退到上一个有效值
// e.target.value = previousValidValue || '';
}
}}
min="2024-01-01"
max="2025-12-31"
/>? 补充说明：
- 使用 min/max 属性可约束日历面板可选范围，Firefox 会自动禁用超出范围的日期按钮；
- setCustomValidity() 提供语义化错误提示，兼容屏幕阅读器；
- 若需完全隐藏原生日历图标（不推荐），应改用自定义日期选择器（如 React DatePicker），但务必自行实现完整键盘导航与 ARIA 标签；
- 永远优先信任原生 <input type="date"> 的可访问性实现——它是经过主流浏览器与辅助工具深度测试的成熟方案。
总之，与其“禁用键盘”，不如“引导正确输入”并“及时校验反馈”。这既符合法规要求，也真正提升了所有用户（包括残障人士）的操作效率与尊严。
