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

Category: Javascript | April 30, 2020
Author: MaxMaeder
Views Total: 46 views
Official Page: Go to website
Last Update: April 30, 2020
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply