Author: | MaxMaeder |
---|---|
Views Total: | 66 views |
Official Page: | Go to website |
Last Update: | April 30, 2020 |
License: | MIT |
Preview:

Description:
keyboardFocus.js is a JavaScript alternative to the CSS :focus pseudo-class that dynamically adds a CSS class keyboardFocus
to element when it gets focus with the Tab key.
How It Works:
- Add event listener when tab pressed
- Add the “keyboardFocused” class to the currently focused element
- Remove the class when the user interacts with the page with their mouse, or when the page loses focus
How to use it:
1. Download and load the keyboardFocus.js
in the document.
<script src="keyboard-focus.js"></script>
2. Style the focused element in the CSS.
.keyboardFocused { outline: 2px dashed red; }