如何获取正确键码以配置reveal.js的keyboard键盘映射？

解决方案 #

第一步：获取对应按键的真实有效键码 #

在打开了你的reveal.js演示页面的浏览器控制台中运行以下代码，之后按下你要绑定的按键（包括罗技演示器上的对应按键），控制台会直接输出对应数值：

document.addEventListener('keydown', (e) => {
  console.log('按键名称：', e.key, ' 对应键码数值：', e.keyCode, ' 修饰键状态：', {ctrl: e.ctrlKey, alt: e.altKey, shift: e.shiftKey})
})

第二步：修正reveal.js配置规则 #

你之前配置无效的核心原因是46是Delete键的键码，并非句号的键码，且F5默认触发浏览器刷新行为需要先阻止默认事件，参考配置如下：

Reveal.configure({
    keyboard: {
        190: () => { alert("period") }, // 主键盘区域英文句号对应键码
        110: () => { alert("numpad period") }, // 小键盘区域句号对应键码
        116: (e) => { 
            e.preventDefault(); // 阻止浏览器默认刷新行为
            console.log('F5 triggered')
        },
        27: () => { console.log('esc') },
    }
});

注意事项 #

• reveal.js的keyboard配置优先兼容整数类型的keyCode值，字符串键名的支持存在版本差异，优先使用数值键码兼容性更好
• 部分罗技演示器会模拟带修饰键的按键输出，运行第一步的监听代码时如果发现按下演示器按键有ctrl/alt/shift修饰键触发，需要额外加条件判断处理
• 如果你的页面配置了iframe或者嵌套的dom结构，要确保监听事件是绑定在reveal.js的容器节点上，避免事件冒泡被拦截

内容的提问来源于stack exchange，提问作者0__