本文介绍如何在纯 HTML + jQuery 环境中，将 ↑、↓ 和 Enter 键重新映射为语义化导航操作：用上下箭头在不同单选按钮组间跳转（非组内切换），用回车键模拟空格键选中当前聚焦的单选按钮，从而提升医疗决策工具等面向非技术用户的表单可访问性与操作直觉性。
本文介绍如何在纯 html + jquery 环境中，将 ↑、↓ 和 enter 键重新映射为语义化导航操作：用上下箭头在不同单选按钮组间跳转（非组内切换），用回车键模拟空格键选中当前聚焦的单选按钮，从而提升医疗决策工具等面向非技术用户的表单可访问性与操作直觉性。
在构建面向临床人员的离线决策支持工具时，用户交互效率至关重要。由于目标用户（如急诊医生）普遍习惯使用 Enter 确认选项、↑/↓ 切换问题区块，而原生 HTML 表单中这些按键默认仅支持组内切换或提交，因此需主动接管键盘事件，实现「按组导航」而非「按控件导航」——这正是本教程的核心目标。
✅ 核心逻辑解析
解决方案基于两个关键前提：
- 所有单选按钮按逻辑分组（每组
name属性唯一），且每组仅含两个选项（Y/N），水平排列； - 每组首个
<input>元素获得焦点时，即代表该组被激活。
由此可推导出简洁可靠的导航策略：
| 键位 | 行为 | 实现要点 |
|---|---|---|
| Enter | 选中当前聚焦的单选按钮 | 调用 .click() 触发原生选中逻辑和 onchange 事件 |
| ↓ | 跳转到下一组的第一个单选按钮 | 在全局 <input> 集合中，定位当前索引 → +2（因每组含 2 个 radio）→ focus()
|
| ↑ | 跳转到上一组的第一个单选按钮 | 同理，索引 -2 → focus()
|
⚠️ 注意：此策略依赖严格的 DOM 结构一致性——每组必须恰好包含两个
<input type="radio">，且顺序固定（如Q0y,Q0n,Q1y,Q1n…）。若结构变化，需改用name分组逻辑（见进阶建议）。
? 完整实现代码（精简优化版）
<script>
window.addEventListener('keydown', function (e) {
// 仅在 radio 聚焦时生效
if (!$("input[type='radio']").is(':focus')) return;
const key = e.which;
// 保留系统快捷键（Ctrl+C/F 等）和基础导航（Tab/Shift+Tab/方向键）
if (e.ctrlKey || e.altKey || key === 9 || key === 37 || key === 39 || key === 32) return;
e.preventDefault(); // 阻止默认行为
const inputs = $('input[type="radio"]');
const currentIndex = inputs.index(document.activeElement);
switch (key) {
case 13: // Enter → 选中当前 radio
document.activeElement.click();
break;
case 40: // ↓ → 下一组第一个 radio（跳过同组第二个）
const nextIndex = currentIndex + 2;
if (nextIndex < inputs.length) inputs.eq(nextIndex).focus();
break;
case 38: // ↑ → 上一组第一个 radio
const prevIndex = currentIndex - 2;
if (prevIndex >= 0) inputs.eq(prevIndex).focus();
break;
}
});
</script>? 关键细节说明
为何用
+2/-2？
因每组严格包含两个<input>（Y/N），且 DOM 中按组顺序排列。例如：[Q0y, Q0n, Q1y, Q1n, Q2y, Q2n]。聚焦Q0n（索引1）时，↓应跳至Q1y（索引2），故1 + 1 = 2；但为统一处理所有情况（包括聚焦Q0y时），直接+2更鲁棒（0 + 2 = 2→Q1y）。-
为何不直接用
name分组？
当前结构简单，+2/-2高效可靠。若未来需支持动态组数或非对称布局，推荐改用：const currentName = document.activeElement.name; const allGroups = [...new Set(inputs.map(el => el.name).get())]; const groupIndex = allGroups.indexOf(currentName); const nextGroupName = allGroups[groupIndex + 1]; $('input[name="' + nextGroupName + '"]:first').focus(); 无障碍兼容性提示
此方案未破坏原生Tab/Space功能，且明确告知用户新快捷键（可在页面顶部添加小提示栏：“? 提示：按 ↑/↓ 切换问题，Enter 确认选择”），符合 WCAG 2.1 键盘导航原则。
✅ 最终效果验证
- 用户聚焦
Q0y→ 按 ↓ → 自动聚焦Q1y（跳过Q0n） - 聚焦
Q1n→ 按 ↑ → 聚焦Q0y（跳过Q1y） - 聚焦任意 radio → 按 Enter → 等效点击，触发
onchange并显示后续问题
该方案零依赖外部库，轻量、稳定、易维护，特别适合嵌入式医疗决策工具等对可靠性要求极高的场景。
