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

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