本文介绍如何通过 javascript 阻止用户使用上下方向键（arrowup/arrowdown）切换 radio 按钮选中状态，从而避免意外触发高频 api 请求，提升表单稳定性与后端安全性。
本文介绍如何通过 javascript 阻止用户使用上下方向键（arrowup/arrowdown）切换 radio 按钮选中状态，从而避免意外触发高频 api 请求，提升表单稳定性与后端安全性。
在 Web 表单中，原生 元素默认支持键盘导航：当焦点落在某一组 radio 按钮上时，按 ↑ 或 ↓ 键会自动切换选中项。这一行为虽符合可访问性规范，但在特定业务场景下可能引发严重问题——例如，每个 radio 选择都会触发一次异步 API 调用，而快速连按方向键将导致数十次无效请求，造成前端卡顿、后端压力激增甚至被限流。
解决该问题的核心思路是拦截并阻止方向键的默认行为，同时保留其他键盘操作（如 Tab 切换焦点、Space 确认选中）的可用性，以兼顾功能性和无障碍支持。
以下为推荐实现方案：
// 获取当前页面所有 radio 按钮（可按需限定作用域，如 form 内）
const radioButtons = document.querySelectorAll('input[type="radio"]');
radioButtons.forEach(radio => {
radio.addEventListener('keydown', (event) => {
// 仅拦截上下方向键；保留左右键（部分浏览器用 ←→ 切换同一组 radio）、空格键等关键操作
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
event.preventDefault(); // 阻止默认切换行为
}
});
});
✅ 注意事项与最佳实践：
- 不要使用 keyCode 或 which：这些属性已废弃（deprecated），现代代码应统一使用 event.key（值为字符串，如 'ArrowUp'）。
- 避免全局禁用所有键盘交互：仅拦截方向键，确保 Space（选中）、Tab（移出）、Enter（若绑定提交）等功能不受影响。
-
作用域控制更安全：若 radio 分属不同逻辑模块，建议按 name 分组或添加 data-disable-arrow-nav 属性进行精细化控制，例如：
document.querySelectorAll('input[type="radio"][data-disable-arrow-nav]').forEach(...) - 无障碍兼容性提醒：禁用方向键后，仍需确保用户可通过 Tab 进入 radio 组，并用 Space 选中目标项——这是 WCAG 2.1 推荐的替代导航方式，不会破坏可访问性。
? 进阶建议（可选）：若需进一步优化用户体验，可在禁用方向键的同时，添加视觉反馈（如聚焦时显示高亮边框）或提供明确提示（如 title="使用空格键选择"），帮助键盘用户快速适应操作逻辑。
综上，通过轻量级事件监听与精准 preventDefault()，即可优雅解决 radio 按钮方向键误触问题，在保障交互可控性的同时，维持良好的可访问性与代码健壮性。
