keystrokes
v1.0.0
Published
Display OS-centric keystrokes in browser
Downloads
20
Readme
keystrokes
Display OS-centric keystrokes in browser
Keystrokes will read the keystroke for a particular data attribute following the form data-{OS slug}
. See below for a list of possible slugs.
Quick Start
Put this in your source:
<span class="keystroke" data-windows="Ctrl-W" data-macos="Cmd-W"></span>
and call this when you see fit:
new Keystrokes();
When you browse your source in a browser, you'll see the customized version:
<!-- On Windows -->
<span class="keystroke" data-windows="Ctrl-W" data-macos="Cmd-W"><code>Ctrl-W</code></span>
<!-- On MacOS -->
<span class="keystroke" data-windows="Ctrl-W" data-macos="Cmd-W"><code>Cmd-W</code></span>
Supported Operating Systems
| OS | Slug |
| ------- | --------- |
| Windows | windows
|
| Mac OS | macos
|
| Linux | linux
|
| Unix | unix
|
Any other operating system will need to leverage the default
data attribute.
Options
selector
- (default:.keystroke
) - The CSS selector to query for keystrokesuseCode
- (default:true
) - Wraps the keystroke text in acode
element
License
This project is licensed under the MIT License. See LICENSE
for details.