This library provides a visual way to display on screen key presses for web demonstrations and recordings.
The keys disappear after half a second by defaulf but it can be costumized.
ScreenKeys Live Website:
And a working demo of this library:
Installation is very simple, just link to the "keys.js" file from this repo.
like so:
<script src="keys.js"></script>
You can also link it directly to GitHub like so:
<script src="https://adir-sl.github.io/ScreenKeys/keys.js"></script>
Then you can call this function:
initKeys();
This function can be customized with the parameters mentioned below.
But it also has some sensible defaults so you don't have to, as mentioned in the "Default parameters" section.
This function includes a few built-in variables to customize your experience:
initKeys(size, posx, posy, delay, bg, txt);
- size referes to the font-size in px (e.g 10, 16, 24);
- posx is the position on the x axis, can be 'left', 'right' or 'center';
- posy is the position on the y axis, can be 'top', 'bottom' or 'center';
- delay refers to the time (in milliseconds) it takes for the toast to disappear (e.g "500", "1000", "1500");
- bg is the color of the background of the keys (CSS background-color);
- txt is the color of the keys' text (CSS color);
Notice that all parameters should be in quotes (either "xxx" or 'xxx') except for font-size, the first parameter.
initKeys(16, 'center', 'bottom', '500', '#cbd5e1', '#334155');
This, and also leaving the parameters blank, will result in:
- font-size: 16px
- position on x: center
- position on y: left
- 500ms (half a second) delay before it disappears
- background-color: #cbd5e1
- color: #334155 (text color)