what-input
Advanced tools
A global utility for tracking the current input method (mouse, keyboard or touch).
The what-input npm package is a utility that helps you track the current input method (mouse, keyboard, touch, etc.) being used by the user. It can be particularly useful for improving accessibility and user experience by allowing developers to tailor interactions based on the input method.
Detecting Input Method
This feature allows you to detect the current input method being used by the user. The `ask` method returns a string representing the input method, such as 'mouse', 'keyboard', or 'touch'.
const whatInput = require('what-input');
console.log(whatInput.ask()); // Logs the current input method, e.g., 'mouse', 'keyboard', 'touch'Listening for Input Method Changes
This feature allows you to set up a listener that triggers a callback function whenever the input method changes. This can be useful for dynamically adjusting the user interface based on the input method.
const whatInput = require('what-input');
whatInput.onChange(function(method) {
console.log('Input method changed to:', method);
});Getting Specific Input Information
This feature provides additional information about the input methods and key codes that the library can detect. The `types` method returns an array of all possible input types, while the `keys` method returns an array of all possible key codes.
const whatInput = require('what-input');
console.log(whatInput.types()); // Logs an array of all possible input types
console.log(whatInput.keys()); // Logs an array of all possible key codesThe detect-it package provides similar functionality by detecting the primary input method (mouse, touch, or keyboard) and whether the device supports touch. It also offers additional features like detecting passive event listeners and pointer events. Compared to what-input, detect-it provides a broader range of device capability detections.
A global utility for tracking the current input method (mouse, keyboard or touch).
What Input improves on track-focus by adding a data attribute on the <body> instead of littering the DOM with classes on elements that have been interacted with. It also exposes a simple API that can be used for scripting interactions.
What Input uses event bubbling on the <body> to watch for mouse, keyboard and touch events (via mousedown, keydown and touchstart). It then sets or updates a data-whatinput on the <body>.
Since the form fields input and textarea rely on the keyboard as their only means of input, What Input does not switch the input type to keyboard when typing to preserve the last detected input type. To override this behavior and allow the keyboard to be recorded, add:
<body data-whatinput-formtyping>
Where present, Pointer Events are supported, but note that pen inputs are remapped to touch.
What Input also exposes a tiny API that allows the developer to ask for or set the current input.
What Input does not make assumptions about the input environment before the user makes their first interaction.
Download the file directly...
or install via Bower...
bower install what-input
or install via NPM...
npm install what-input
Include the script directly in your project.
<script src="assets/scripts/what-input.js"></script>
Or require with a script loader (What Input is AMD compatible).
require('what-input');
What Input will start doing its thing while you do yours.
/**
* set a default :focus style
*/
a:focus {
outline: 3px dotted #06c;
}
/*
* remove :focus style via What Input using progressive enhancement
* so :focus isn't left broken if JavaScript fails
*/
[data-whatinput="mouse"] a:focus,
[data-whatinput="touch"] a:focus {
outline: none;
}
Ask What Input what the current input method is. This works best if asked after the events What Input is bound to (mousedown, keydown and touchstart). Because click always executes last in the event tree, What Input will be able to answer with the event that just happened.
whatInput.ask(); // returns `mouse`, `keyboard` or `touch`
myButton.addEventListener('click', function() {
if (whatInput.ask() === 'mouse') {
// do mousy things
} else if (whatInput.ask() === 'keyboard') {
// do keyboard things
}
});
Ask What Input to return an array of all the input types that have been used so far.
whatInput.types(); // ex. returns ['mouse', 'keyboard']
Tell What Input what's being used. This can be useful if you'd like to set an input method before the user has actually interacted with the page. What Input is not so assumptive on its own.
whatInput.set('hamster');
whatInput.ask(); // 'hamster'
Along with tracking the use of the keyboard, What Input keeps track of the currently pressed keys and stores them in an array. Instead of returning cryptic key codes, What Input uses plain language.
This can be used if, for example, you want to track how an element is being interacted with.
whatInput.keys(); // ex. returns ['shift', 'tab']
myMenuTab.addEventListener('keyup', function() {
// query for the down arrow
if (whatInput.keys().indexOf('down') !== -1) {
// open the dropdown menu
}
});
What Input only responds to the following "action" keys: 'tab', 'enter', 'shift', 'esc', 'space', 'left', 'up', 'right' and 'down'.
What Input works in all modern browsers. For compatibility with IE8, polyfills are required for:
Add your own, or grab the bundle included here.
<!--[if lte IE 8]>
<script src="lte-IE8.js"></script>
<![endif]-->
Check out the demo to see What Input in action.
http://ten1seven.github.io/what-input
Special thanks to Viget for their encouragement and commitment to open source projects. Visit code.viget.com to see more projects from Viget.
What Input is written and maintained by @ten1seven.
What Input is freely available under the MIT License.
FAQs
A global utility for tracking the current input method (mouse, keyboard or touch).
We found that what-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.