如何自定义箭头键与回车键行为以导航多组单选按钮-html教程-PHP中文网

如何自定义箭头键与回车键行为以导航多组单选按钮

本文介绍如何在纯 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();