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).
Now with more information and less opinion!
What Input adds data attributes to the window based on the type of input being used. It also exposes a simple API that can be used for scripting interactions.
What Input uses event bubbling on the window to watch for mouse, keyboard and touch events (via mousedown, keydown and touchstart). It then sets or updates a data-whatinput attribute.
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 the current input, set custom ignore keys, and set and remove custom callback functions.
What Input does not make assumptions about the input environment before the page is interacted with. However, the mousemove and pointermove events are used to set a data-whatintent="mouse" attribute to indicate that a mouse is being used indirectly.
Check out the demo to see What Input in action.
https://ten1seven.github.io/what-input
Since interacting with a form always requires use of the keyboard, What Input uses the data-whatintent attribute to display a "buffered" version of input events while form <input>s, <select>s, and <textarea>s are being interacted with (i.e. mouse user's data-whatintent will be preserved as mouse while typing).
Download the file directly.
Install via Yarn:
yarn add what-input
Install via NPM:
npm install what-input
Include the script directly in your project.
<script src="path/to/what-input.js"></script>
Or require with a script loader.
import 'what-input'
// or
import whatInput from 'what-input'
// or
require('what-input')
// or
var whatInput = require('what-input')
// or
requirejs.config({
paths: {
whatInput: 'path/to/what-input',
},
})
require(['whatInput'], function () {})
What Input will start doing its thing while you do yours.
By default, What Input uses session storage to persist the input and intent values across pages. The benefit is that once a visitor has interacted with the page, subsequent pages won't have to wait for interactions to know the input method.
This behavior can be disabled by adding a data-whatpersist="false" attribute on either the <html> or <body>.
<html dir="ltr" lang="en" data-whatpersist="false">
...
</html>
or
<body data-whatpersist="false">
...
</body>
Session storage can be cleared at any time with:
whatInput.clearStorage()
/*
* only suppress the focus ring once what-input has successfully started
*/
/* suppress focus ring on form controls for mouse users */
[data-whatintent='mouse'] *:focus {
outline: none;
}
Note: If you remove outlines with outline: none;, be sure to provide clear visual :focus styles so the user can see which element they are on at any time for greater accessibility. Visit W3C's WCAG 2.0 2.4.7 Guideline to learn more.
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).
whatInput.ask() // returns `mouse`, `keyboard` or `touch`
myButton.addEventListener('click', () => {
if (whatInput.ask() === 'mouse') {
// do mousy things
} else if (whatInput.ask() === 'keyboard') {
// do keyboard things
}
})
If it's necessary to know if mousemove is being used, use the 'intent' option. For example:
/*
* nothing has happened but the mouse has moved
*/
whatInput.ask() // returns `initial` because the page has not been directly interacted with
whatInput.ask('intent') // returns `mouse` because mouse movement was detected
/*
* the keyboard has been used, then the mouse was moved
*/
whatInput.ask() // returns `keyboard` because the keyboard was the last direct page interaction
whatInput.ask('intent') // returns `mouse` because mouse movement was the most recent action detected
Ask What Input the currently focused DOM element.
whatInput.element() // returns a string, like `input` or null
Set a custom array of keycodes that will be ignored (will not switch over to keyboard) when pressed. A custom list will overwrite the default values.
/*
* default ignored keys:
* 16, // shift
* 17, // control
* 18, // alt
* 91, // Windows key / left Apple cmd
* 93 // Windows menu / right Apple cmd
*/
whatInput.ignoreKeys([1, 2, 3])
Set a custom array of keycodes that will trigger the keyboard pressed intent (will not switch to keyboard unless these keys are pressed). This overrides ignoreKeys.
// only listen to tab keyboard press
whatInput.specificKeys([9])
Fire a function when the input or intent changes.
// create a function to be fired
var myFunction = function (type) {
console.log(type)
}
// fire `myFunction` when the intent changes
whatInput.registerOnChange(myFunction, 'intent')
// fire `myFunction` when the input changes
whatInput.registerOnChange(myFunction, 'input')
// remove custom event
whatInput.unRegisterOnChange(myFunction)
What Input works in all modern browsers.
data-whatpersist before DOMContentLoaded. Fix via FanFataL.useCapture so events can be detected before preventDefault cancels them on local listeners (h/t jojo080889).DOMContentLoaded event before looking for data-whatpersist attribute on body.dataset in IE10.data-whatpersist="false" attribute to the <html> or <body> tag to disable usage of session storage to persist input/intent across pages.activeElement is null bug in IE is fixed (thanks @EasterPeanut).mouse because of event execution order.touchend to input maptouchend to input mapspecificKeys functionality to allow overriding of keyboard keys list. Fix via bk3.unRegisterOnChange failed to unregister items at index 0.whatInput.registerOnChange and whatInput.unRegisterOnChange.data-whatelement attribute exposes any currently focused DOM element (i.e. data-whatelement="a" or data-whatelement="input").data-whatclasses attribute exposes any currently focused element's classes as a comma-separated list (i.e. data-whatclasses="class1,class2").data-whatinput attribute immediately reflects the current input. The data-whatintent attribute now takes on the role of remembering mouse input prior to typing in or clicking on a form field.data-whatinput attribute reflects the current input (switches to "keyboard").whatInput.types() API option.shift, control, alt, cmd) no longer toggles back to keyboard.Special thanks to Viget for their encouragement and commitment to open source projects. Visit code.viget.com to see more projects from Viget.
Thanks to mAAdhaTTah for the initial conversion to Webpack. Thanks to greypants for adding TypeScript definitions.
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).
The npm package what-input receives a total of 95,651 weekly downloads. As such, what-input popularity was classified as popular.
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
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.