Improve your website UX with “What Input”, use it for CSS styling or JavaScript checks

“What Input” is a global utility for tracking the current input method (mouse, keyboard or touch). Thanks to this library, you can use CSS selector, ie: [data-whatinput=”keyboard”] or JavaScript checks to know the type of input being used.

How what-input works?

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.

An easy use case can be to display copy for touch devices: “tap here to…” rather than “click here to…” based on the “what-input” touch. Or to only show a certain focus state if the user is using the keyboard:

/*
 * only show style for keyboard focus what-input has successfully started
 */

[data-whatinput="keyboard"] {
  li a:focus {
    color: red;
  }
}

Or

whatInput.ask() // returns `mouse`, `keyboard` or `touch`

$togglePanel.on('click', () => {
  if (whatInput.ask() === 'mouse') {
    // do mousy things
  } else if (whatInput.ask() === 'keyboard') {
    // do keyboard things
  }
})

Read more about it at https://github.com/ten1seven/what-input

Happy coding!