1.0.1 • Published 4 years ago
detect-keyboard-user v1.0.1
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
Installation
npm i detect-keyboard-userImport
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