@yandeu/keyboard

⌨️ Keyboard

Handling of keyboard events.
(Inspired by keyboardjs)

Installation

npm install @yandeu/keyboard

CDN

https://unpkg.com/@yandeu/keyboard/umd/keyboard.min.js

Usage

// print the current version
console.log('Keyboard VERSION: ', Keyboard.VERSION)

// instantiate
const keyboard = new Keyboard()

// watch all keys down
keyboard.watch.down(keyCode => {
  console.log('down', keyCode)
})

// watch all keys up
keyboard.watch.up(keyCode => {
  console.log('up', keyCode)
})

// listen for Q down
keyboard.on.down('KeyQ', keyCode => {
  console.log(`${keyCode} is down.`)
})

// listen for L, K or Space down
keyboard.on.down('KeyL KeyK Space', keyCode => {
  console.log(`${keyCode} is down.`)

  const L = keyboard.key('KeyL').isDown
  const K = keyboard.key('KeyK').isDown
  const Space = keyboard.key('Space').isDown

  if (L && K && Space) {
    console.log('All 3 keys are down!')
  }
})

// listen for L up
keyboard.on.up('KeyL', () => {
  console.log('KeyL is up.')
})

// listen for key E or R down (once)
keyboard.once.down('KeyE KeyR', keyCode => {
  console.log(`${keyCode} is down.`)
})

// check if W is down
keyboard.key('KeyW').isDown

// check if U is up
keyboard.key('KeyU').isDown

// check if paused
keyboard.isPaused

// pause all events (except .once())
keyboard.pause()

// resume all events
keyboard.resume()

// destroy all events once you are done
keyboard.destroy()

KeyCode

This library always uses the keyCode (KeyboardEvent.code). Why? Read this:

The code attribute

First up is the code attribute. This is set to a string representing the key that was pressed to generate the KeyboardEvent, without taking the current keyboard layout (for example, QWERTY vs. Dvorak), locale (for example, English vs. French), or any modifier keys into account. This is useful when you care about which physical key was pressed, rather than which character it corresponds to. For example, if you’re a writing a game, you might want a certain set of keys to move the player in different directions, and that mapping should ideally be independent of keyboard layout.

source: https://developers.google.com/web/updates/2016/04/keyboardevent-keys-codes#the_code_attribute

keycode.info

Check keycode.info (event.code) to get useful information about your inputs.

Related Packages

Package	Description
audio	🎵 Audio library for the Web Audio API.
keyboard	⌨️ Handling of keyboard events.
tap	🖱️ Handling of user interactions such as mouse, touch and pointer events.

Questions?

Join the enable3d discussions!

License

MIT