Apply A CSS Class To Element When It Gets Focus – keyboardFocus.js

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;
}