Show What Keys Are Being Pressed On The Page - js-keyboard-keys
| File Size: | 5.86 KB |
|---|---|
| Views Total: | 971 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
js-keyboard-keys is a jQuery plugin that detects keypress events and shows what keys are being pressed on the screen.
Currently supports Ctrl, Alt, Shift, Win (Windows) and CMD (Mac) keys.
How to use it:
1. Create buttons which will be highlighted when the corresponding keys are pressed.
<span class="key-ctrl">Ctrl</span> <span class="key-shift">Shift</span> <span class="key-alt">Alt</span> <span class="key-meta">⊞ Win</span>
2. Load the stylesheet js-keyboard-keys.css in the header to style the buttons.
<head> ... <link rel="stylesheet" href="dist/js-keyboard-keys.min.css"> ... </head>
3. Load both jQuery JavaScript and the JavaScript js-keyboard-keys.js at the end of the document. Done.
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="dist/js-keyboard-keys.min.js"></script>
...
</body>
This awesome jQuery plugin is developed by cornips. For more Advanced Usages, please check the demo page or visit the official website.
