4款网页键盘快捷键JS库合集

网页里做快捷键没有想象中简单。要判断用户按的是什么键，得处理 keyCode、ctrlKey、metaKey 这些组合；想只让某个区域响应按键，还要管焦点；想区分 Mac 的 Command 和 Windows 的 Ctrl，又得额外判断。一个像样的编辑器、图床、后台系统，没有几十个快捷操作根本不够用。这次整理了 4 款开源免费、可商用的网页键盘快捷键库，把键位解析、组合判断和作用域管理都封好了，注册一行就能用。

四款库分别适合什么

Hotkeys.js 是现在用得最多的一款，写法直观，一行就能注册一个组合键，自动识别 Mac 的 Command 和 Windows 的 Ctrl，还支持按作用域开关一组快捷键，同一个键在不同面板可以做不同的事。Mousetrap 是老牌选手，轻量无依赖，最特别的是支持序列快捷键，像 Gmail 那样先按一个键再按另一个键触发，还支持通配符和自定义按键映射。Keymaster 走极简路线，接口就一个函数，十几 KB，适合只想加几个全局热键的小页面。jwerty 偏声明式，能把按键组合直接写进事件绑定里，适合喜欢这种风格的团队。

为什么值得用库而不是自己写

单看一个键好像不难，麻烦的是组合。用户按住 Ctrl 的同时按了 Shift 再按 S，这三个键的先后和状态要判断对；输入框里打字时按下的字母不能当成快捷键触发，否则用户打字就打不痛快；页面上有多个面板，各自有一套快捷键，还得能随时开关。这些边界情况自己写一遍，代码量和坑都不小，而且很难覆盖所有浏览器。成熟的快捷键库这些问题都处理过了，你只要关心「按了这个键要做什么」这一层，开发效率完全不一样。

实际用起来要注意什么

一是别和浏览器自带的组合冲突。像 Ctrl+S 保存、Ctrl+T 新标签这种，注册之后记得阻止默认行为，否则用户按下去浏览器会先执行自己的动作。二是快捷键要和可见的按钮对应上，用户看不到入口，再顺手的快捷键也没人知道，最好在按钮旁边标注提示。三是移动端没有物理键盘，别把核心功能压到快捷键上，那只是提升效率的补充，不是唯一入口。四是注册完记得在组件销毁时解绑，否则页面切来切去会重复响应。

包内容和用法

压缩包里按库名分成了四个目录，每个目录里放了压缩版和带注释的非压缩版两种文件，正式项目引压缩版，调试的时候看非压缩版。四款库互相独立、不依赖任何框架，用 script 标签引入就能拿到全局对象，也支持模块化引入。选型上按需求挑，新项目、需要作用域管理用 Hotkeys.js，要序列快捷键和通配符用 Mousetrap，只要极简全局热键用 Keymaster，偏好声明式写法用 jwerty。每个目录都附带了说明文档和许可文件。

快捷键这类东西属于投入很小、体验提升很直观的功能。一个后台系统操作路径很长，把常用的保存、新建、搜索都配上快捷键，熟练用户一天能省下大量鼠标移动的时间。动手前建议先列一遍页面上最常用的操作，挑三五个先做起来，用顺了再扩。这四款加起来不到一百 K，按需引入基本不占体积，全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和工具合集，需要的可以先收藏。