Keyboard Shortcuts
快捷键
Aliases:快捷键键盘快捷键快捷键提示键盘加速键按键操作keyboard shortcutshotkeyskey bindings
What is it
Discoverable keyboard accelerators for frequent commands, paired with a help entry. Hints can live in tooltips, a shortcuts dialog (⌘K-style) or vim-like sequences. It speeds up experts while keeping focus visible, never stealing keys from text inputs, and staying discoverable for newcomers.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Dense, repetitive commands — editors, admin tools, design apps
- Keyboard-first users chasing muscle memory
- A command palette exists and needs key bindings plus help
✕ When not to use
- Form-heavy pages where global key capture breaks typing
- Touch-first products with no keyboard to accelerate
- Shortcuts with no discoverability path — newcomers are stuck
Variants
Tooltip hints
工具条标注
Key chips beside buttons or in tooltips — lightest touch
Shortcuts dialog
快捷键对话框
⌘K or ? opens a full cheat sheet
Vim-style sequences
vim 式序列
Multi-key sequences (gg, dd) — steep, but blazing for experts
Implementation
:focus-visibleoutlinekbdgridOn keydown inspect event.target — skip single-key bindings when focus sits in input, textarea or contenteditable. Match on event.key plus metaKey/ctrlKey/shiftKey and only preventDefault when the combination is not reserved by the OS or browser. The shortcuts dialog can be role="dialog" with kbd elements showing keys. Style focus with :focus-visible and respect prefers-reduced-motion.
Platform API
keydownKeyboardEvent:focus-visibleRelated concepts
A floating search panel summoned with ⌘K / Ctrl+K: type to filter commands, pages or content, navigate with arrow keys, execute with Enter. Popularized by macOS Spotlight; now standard in power-user products.
ComponentsUsed withA small text bubble that appears briefly on hover, explaining icon buttons, abbreviations or truncated text. Purely informational and non-interactive, it disappears on mouse leave; usually shows after a ~300ms delay to avoid flicker while moving across the screen.
ComponentsUsed withA visible outline marking the currently focused element, so users know where the next keystroke will land. Pointer users rarely need it, but keyboard and assistive-tech users must always see focus or they are operating blind. Usually driven by :focus-visible — shown for keyboard focus, silent for mouse clicks.
AccessibilityUsed withMake every feature operable by keyboard alone: Tab/Shift+Tab move focus in a sane order, composite widgets roam with arrow keys over a roving tabindex, Escape dismisses overlays and returns focus. The full focus discipline beyond the focus ring, codified in the ARIA APG.
AccessibilityUsed with