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.

Usage no npm install needed!

<script type="module">
  import detectKeyboardUser from 'https://cdn.skypack.dev/detect-keyboard-user';
</script>

README

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

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