🌟 500 字节的键盘灵魂,让用户体验起飞! 🚀💨
💡 "不是所有快捷键都叫
tinykeys
。"🔥 体积仅 500 字节(gzip),却能让你的应用瞬间拥有专业级键盘体验!
🎯 一句话介绍
tinykeys
是一个超轻量级 JavaScript 键盘快捷键库 🪶⚡,API 简洁到像呼吸一样自然,支持组合键、顺序键、自动平台适配,让你轻松实现 Cmd+K
搜索、Esc
关闭、?
帮助提示等高级交互!
💬 "它不是快捷键库,它是用户体验的加速器。" ------ 来自无数开发者的真实反馈 ✅
🧰 为什么你需要它?
传统痛点 ❌ | tinykeys 解法 ✅ |
---|---|
手动监听 keydown 太繁琐 |
声明式语法,一键绑定 🎯 |
判断 event.metaKey / ctrlKey 太麻烦 |
自动识别 Mac/Windows 平台 🔁 |
快捷键逻辑散落各处 | 集中式管理,清晰可维护 🧩 |
体积大、依赖多 | 零依赖,仅 500B,比一张表情包还小 📦 |
不支持顺序快捷键(如 g i ) |
支持多段组合,灵活强大 ⌨️ |
🚀 快速上手:3 步起飞!
Step 1️⃣:安装它!
bash
npm install tinykeys
或使用 CDN(推荐开发测试):
html
<script type="module">
import { tinykeys } from 'https://unpkg.com/tinykeys'
</script>
Step 2️⃣:引入并使用!
js
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 中优雅封装 🎭
jsx
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,无需任何构建工具!
html
<!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 应用提升用户体验的 最低成本高回报方案!🎯💫