本文介绍如何通过 javascript 阻止用户使用上下方向键（arrowup/arrowdown）切换 radio 按钮选中状态，避免意外触发高频 api 请求，提升表单交互稳定性与后端负载安全性。
本文介绍如何通过 javascript 阻止用户使用上下方向键（arrowup/arrowdown）切换 radio 按钮选中状态，避免意外触发高频 api 请求，提升表单交互稳定性与后端负载安全性。
在 Web 表单中，原生 <input type="radio"> 元素默认支持键盘导航：聚焦任一 radio 后，按 ↑ 或 ↓ 键会自动在同 name 组内循环切换选中项。这一行为在需“选中即触发异步操作”（如调用 API 加载下级选项）的场景中极易引发问题——用户无意长按方向键，将导致数十次重复请求，不仅浪费资源，还可能造成接口限流或数据错乱。
解决方案是拦截 keydown 事件并阻止默认行为，而非禁用整个 radio 的键盘可访问性（如 tabindex="-1" 会损害无障碍体验）。现代标准推荐使用 event.key（而非已废弃的 keyCode）精准识别方向键：
// 为所有 radio 按钮绑定方向键拦截逻辑
document.querySelectorAll('input[type="radio"]').forEach(radio => {
radio.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.preventDefault(); // 阻止默认的组内切换行为
}
});
});✅ 关键优势：
- 仅屏蔽方向键，保留 Tab 切换焦点、Space 确认选中等核心可访问操作；
- 不影响鼠标点击、触摸或程序化 checked = true 等正常交互；
- 兼容所有现代浏览器（Chrome 51+、Firefox 48+、Safari 10.1+、Edge 79+）。
⚠️ 注意事项：
- 若 radio 分组使用动态生成（如 Vue/React 渲染），需确保事件监听器在元素挂载后执行，或采用事件委托（监听父容器 + e.target.matches('input[type="radio"]')）；
- 对于已存在 onkeydown 内联处理器的 radio，建议统一迁移到 addEventListener 以避免覆盖；
- 如需同时禁用 Left/Right（在水平布局中可能生效），可扩展判断条件：['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)。
最后，配合防抖（debounce）机制处理 change 事件，可进一步加固防护：
let apiTimer;
radio.addEventListener('change', () => {
clearTimeout(apiTimer);
apiTimer = setTimeout(() => {
fetch(`/api/data?option=${radio.value}`)
.then(renderNextSelect);
}, 300); // 延迟 300ms 执行，过滤快速误触
});通过组合「键盘拦截 + 变更防抖」，即可在保障无障碍的前提下，彻底解决方向键引发的 API 飙升问题。
