Detect Keyboard User

Detect if the user navigate with his keyboard ⌨️ or mouse 🖱️. Then add a matching class to the html element. This allow to remove the blue outline for the mouse users and keeps it at the same time for the keyboard users.

👍 Lite 5kb (2kb Gzipped) ⚡ Fast Native JavaScript 🚫 No Dependencies

Going back and forth between mouse and keyboard navigation

Examples

• Basic
• Pointer-priority

Installation

npm i detect-keyboard-user

Import

CDN

<script src="https://unpkg.com/detect-keyboard-user"></script>;

Classic

const DetectKeyboardUser = require('detect-keyboard-user');

ES6

import DetectKeyboardUser from 'detect-keyboard-user';

Usage

const myDKU = new DetectKeyboardUser();

Options

Option	Default	Possibilities	Description
keyboardPriority	true	Boolean (true/false)	By default, should we consider the user is using his keyboard or a pointer (mouse). I suggest you keep it to 'true' to pass the automated accessibility audits.

Methods

Method	Description
myDKU.refresh();	You should call this method if you emulate devices with your browser and want to avoid false/positive
myDKU.destroy();	Remove everything 😥

Originally inspired by

The great David Gilbertson and his article on Medium.com | Removing that ugly :focus ring (and keeping it too)

Support

Chrome, Firefox, Safari, Edge, IE 11