keyboard-focus

Detect when an element has received focus from a keyboard

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
keyboard-focus
611.0.16 years ago6 years agoMinified + gzip package size for keyboard-focus in KB

Readme

Keyboard Focus JavaScript LogoKeyboard Focus
!NPM Versionnpm-imgnpm-url !Build Statuscli-imgcli-url !Gitter Chatgit-imggit-url
Keyboard Focus lets you detect when an element has received focus from a keyboard instead of a pointer, such as a mouse or touch input.
Keyboard Focus adds a keyboard-focus attribute to any focused element that is given focus by a keyboard.
This can be used to style components specifically if focus is triggered by a keyboard or not:
/* hide the focus indicator when triggered by a pointer (touch, mouse, etc.) */

:focus:not([keyboard-focus]) {
  outline-width: 0;
}

Usage

Add Keyboard Focus to your build tool:
npm install keyboard-focus --save-dev

Activate Keyboard Focus on the document:
import keyboardFocus from 'keyboard-focus';

keyboardFocus(document);

Difference between [keyboard-focus] and .focus-visible

The .focus-visible class applies while an element matches the :focus pseudo-class and the UA determines via heuristics that the focus should be made evident on the element.
The [keyboard-focus] attribute-selector applies while an element matches the :focus pseudo-class regardless of these heuristics.

License

Keyboard Focus is licensed under the W3C Software License which is also GPL, MIT, and BSD compatible.
Keyboard Focus is forked from the focus-visible polyfill, and includes substantial material copied from their excellent efforts.