每日前端宝藏库 | tinykeys ✨
🌟 500 字节的键盘灵魂，让用户体验起飞！ 🚀💨
💡 “不是所有快捷键都叫tinykeys。”
🔥 体积仅 500 字节（gzip），却能让你的应用瞬间拥有专业级键盘体验！
🎯 一句话介绍
tinykeys 是一个超轻量级 JavaScript 键盘快捷键库 🪶⚡，API 简洁到像呼吸一样自然，支持组合键、顺序键、自动平台适配，让你轻松实现 Cmd+K 搜索、Esc 关闭、? 帮助提示等高级交互！
💬 “它不是快捷键库，它是用户体验的加速器。” —— 来自无数开发者的真实反馈 ✅
🧰 为什么你需要它？
| 传统痛点 ❌ | tinykeys 解法 ✅ |
|---|---|
手动监听 keydown 太繁琐 | 声明式语法，一键绑定 🎯 |
判断 event.metaKey / ctrlKey 太麻烦 | 自动识别 Mac/Windows 平台 🔁 |
| 快捷键逻辑散落各处 | 集中式管理，清晰可维护 🧩 |
| 体积大、依赖多 | 零依赖，仅 500B，比一张表情包还小 📦 |
不支持顺序快捷键（如 g i） | 支持多段组合，灵活强大 ⌨️ |
🚀 快速上手：3 步起飞！
Step 1️⃣：安装它！
npm install tinykeys
或使用 CDN（推荐开发测试）：
<script type="module">import { tinykeys } from 'https://unpkg.com/tinykeys'
</script>
Step 2️⃣：引入并使用！
import { tinykeys } from "tinykeys"// 绑定全局快捷键
const unsubscribe = tinykeys(window, {// 打开搜索框"Cmd+K": () => openSearch(),// 保存文档"Ctrl+S": (e) => {e.preventDefault()saveDocument()},// 关闭弹窗Escape: () => closeModal(),// 顺序快捷键：先按 g，再按 i"g i": () => goToInbox()
})
✅ 返回
unsubscribe()函数，组件销毁时调用即可清理事件！
Step 3️⃣：在 React 中优雅封装 🎭
import { useEffect } from "react"
import { tinykeys } from "tinykeys"function useKeyboardShortcuts() {useEffect(() => {const unsubscribe = tinykeys(window, {"Cmd+K, Ctrl+K": (e) => {e.preventDefault()openSearch()},"?": (e) => {e.preventDefault()showHelpModal()},Escape: () => {if (modalOpen) closeModal()}})return () => unsubscribe() // 自动清理}, [])
}// 使用
function App() {useKeyboardShortcuts()return (<div><h1>欢迎来到我的应用！</h1><p>试试按 <kbd>Cmd+K</kbd> 或 <kbd>?</kbd> 吧～</p></div>)
}
💻 在线测试沙盒 🧪
👉 复制下面这段代码，保存为 index.html，双击打开即可运行！
✅ 纯 HTML + CDN，无需任何构建工具！
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>🔧 tinykeys 测试沙盒</title><style>body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;max-width: 800px;margin: 40px auto;padding: 20px;background: #f7f9fc;color: #333;line-height: 1.6;}.log {margin: 10px 0;padding: 12px;background: #f0f0f0;border-left: 4px solid #3498db;border-radius: 6px;font-size: 14px;}kbd {background: #eee;padding: 4px 8px;border-radius: 4px;font-family: monospace;border: 1px solid #ccc;}h2 { color: #2c3e50; }</style>
</head>
<body><h2>⌨️ tinykeys 测试沙盒（CDN 版）</h2><p>尝试以下快捷键：</p><ul><li><kbd>Shift+P</kbd> → 触发打印</li><li><kbd>Ctrl+Alt+L</kbd> 或 <kbd>Cmd+Option+L</kbd> → 锁定屏幕</li><li><kbd>?</kbd> → 显示帮助</li><li><kbd>g</kbd> 然后 <kbd>i</kbd> → 跳转收件箱（顺序触发）</li></ul><div id="logs"></div><!-- ✅ 使用 CDN 引入 tinykeys --><script type="module">import { tinykeys } from 'https://unpkg.com/tinykeys@2.4.1/dist/esm/index.js'const logArea = document.getElementById('logs')const log = (text, icon = '💡') => {const div = document.createElement('div')div.className = 'log'div.textContent = `${icon} ${text}`logArea.prepend(div) // 最新的在最上面if (logArea.children.length > 10) {logArea.removeChild(logArea.lastChild)}}// 初始化快捷键tinykeys(document, {"Shift+P": () => log('打印命令已触发！', '🖨️'),"Ctrl+Alt+L": () => log('屏幕已锁定！', '🔒'),"Cmd+Option+L": () => log('Mac 屏幕已锁定！', '🔐'),"?": () => log('帮助：Shift+P 打印，? 查看帮助，g i 跳转', '❓'),"Escape": () => log('操作已取消。', '🚫'),"g i": () => log('🎉 顺序快捷键生效！跳转到收件箱...', '📬')})log('✅ tinykeys 已加载，开始测试吧！', '🟢')</script></body>
</html>
🔗 stackblitz：
👉 StackBlitz - tinykeys CDN Demo
🧩 高级技巧一览 🎯
| 技巧 | 示例 |
|---|---|
| 多快捷键绑定同一动作 | "Cmd+K, Ctrl+K": handler |
| 顺序快捷键（vim 风格） | "g h": goHome, "g i": goInbox |
| 条件性响应 | 在 if (editorActive) 中绑定 Ctrl+S |
| 动态启用/禁用 | 结合 useEffect 或生命周期自动管理 |
| 防止默认行为 | e.preventDefault() 自行控制 |
📊 适用场景 🎯
- 🔍 全局搜索（
Cmd+K）🔍 - 📝 内容编辑器（撤销、保存、格式化）📝
- 🧱 管理后台（快速跳转、批量操作）💼
- 🎮 Web 应用游戏化交互（彩蛋触发）🎮
- 🌐 SaaS 产品提升专业感与效率 🚀
🏁 总结：tinykeys 是你的键盘指挥官！🎹💖
| 评分 | 内容 |
|---|---|
| 🚀 易用性 | ⭐⭐⭐⭐⭐ |
| 📦 体积 | ⭐⭐⭐⭐⭐ |
| 🔄 兼容性 | ⭐⭐⭐⭐☆ |
| 🧩 扩展性 | ⭐⭐⭐⭐☆ |
| 💡 推荐指数 | 🔥🔥🔥🔥🔥 |
✅ 一句话推荐： 如果你的应用还没有键盘快捷键，是时候用 tinykeys 加一把了！它小巧、精准、无负担，是现代 Web 应用提升用户体验的 最低成本高回报方案！🎯💫