每日前端宝藏库 | tinykeys ✨

🌟 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 应用提升用户体验的 最低成本高回报方案!🎯💫

相关推荐
Demoncode_y2 小时前
Vue3 + Three.js 实现 3D 汽车个性化定制及展示
前端·javascript·vue.js·3d·汽车·three.js
Dontla2 小时前
Turbopack介绍(由Vercel开发的基于Rust的高性能前端构建工具,用于挑战传统构建工具Webpack、vite地位)Next.js推荐构建工具
前端·rust·turbopack
两个西柚呀2 小时前
nodejs中http模块搭建web服务器
服务器·前端·http
Focusbe3 小时前
百变AI助手:离线优先数据同步方案设计
前端·后端·面试
ObjectX前端实验室4 小时前
React Fiber 双缓冲树机制深度解析
前端·react.js
细节控菜鸡4 小时前
【2025最新】ArcGIS for JS 实现地图卷帘效果,动态修改参数(进阶版)
开发语言·javascript·arcgis
高斯林.神犇4 小时前
javaWeb基础
前端·chrome
用户21411832636024 小时前
dify案例分享-Qwen3-VL+Dify:从作业 OCR 到视频字幕,多模态识别工作流一步教,附体验链接
前端
南屿im5 小时前
把代码变成“可改的树”:一文读懂前端 AST 的原理与实战
前端·javascript