npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

whatkey

v2.0.1

Published

Takes a event object and returns the key pressed

Downloads

3,289

Readme

whatkey

Downloads Downloads NPM Version Dependencies Dev Dependencies License

A translator for javascript keyboard events to and from consistent and familiar character and key representations. Take your keydown, keypress, and keyup events and reliably translate them into keyboard keys and characters.

Example

myCanvas.addEventListener('keydown', (event) => {
  const key = whatkey(event).key;
  if (key === 'w') {
    goUp();
  } else if(key === '\n') {
    confirm();
  } else if (key === 'shift') {
    if (event.location === 1) { // left shift
      shiftDown();
    } else {                   // right shift
      shiftUp();
    }
  } else if (key === '\b') {
    event.preventDefault();     // prevent changing pages
  } else {
    const char = whatkey(event).char;
    if (char === 'r') {
      reload()''
    } else if (char === 'R') {
      secondaryReload();
    }
  }
});
textfield.addEventListener('keypress', (e) => {
  const validChars = ['0','1','2','3','4','5'];

  const char = whatkey(event).char;
  if (validChars.indexOf(char) < 0)) {
    event.preventDefault()  // prevent the character from being input
  }
});

Install

npm i -S whatkey
// or
yarn add whatkey
// or
bower install whatkey

Usage

Accessing whatkey:

import whatkey from 'whatkey';

Using whatkey:

whatkey(event) - Takes in a keyboard event from keypress, keyup, or keydown and returns an object that has the following properties:

  • key - The keyboard key pressed. Does not take into account shift, so for example if you type 'A', this will contain 'a'.
  • char - The character created by the key press. Takes into account shift, so if you type 'A', this will contain 'A'. Note that in cases where there are multiple keys that give the same character, the simpler character is used (eg. if the key is "num_enter", char will be "\n")

** whatkey.unprintableKeys** - An array of unprintable keys (including backspace and delete, which do usually modify inputs)

Special Key and character strings

The key and char values contain the actual character typed ('a', '$', '\t', etc) except in the following cases where the character isn't printable. The string on the left is the string that represents the conceptual key/character on the right:

  • backspace - Backspace key. Note that the char value for this will be '\b'
  • enter - Enter key. Note that the char value for this will be '\n'
  • tab - Tab key. Note that the char value for this will be '\t'
  • shift - the shift key
  • meta - windows / command key (here 'meta' is used since the character is named different things on mac vs windows)
  • ctrl - control key
  • alt - alt key
  • pause - pause key
  • caps - caps lock key
  • esc - escape key
  • pageup
  • pagedown
  • end
  • home
  • left
  • right
  • up
  • down
  • print
  • insert
  • delete
  • num0 - Number pad key 0. Note that the char value for this will be '0'.
  • num1 - Number pad key 1. Note that the char value for this will be '1'.
  • num2 - ...
  • num3
  • num4
  • num5
  • num6
  • num7
  • num8
  • num9
  • num_enter - Number pad enter key. Note that the char value for this will be '\n'.
  • num_subtract - Number pad subtract key. Note that the char value for this will be '-'.
  • num_decimal - Number pad decimal key. Note that the char value for this will be '.'.
  • num_divide - Number pad divide key. Note that the char value for this will be '/'.
  • f1 - function key 1
  • f2 - ...
  • f3
  • f4
  • f5
  • f6
  • f7
  • f8
  • f9
  • f10
  • f11
  • f12
  • print - print-screen key
  • num - num-lock
  • scroll - scroll-lock

keypress vs keydown/keyup

In handling keyboard events, keydown/keyup is almost always the best choice. However, there is at least one case where you want keypress over keydown/keyup: cases where copy/paste is used. If you ctrl-v paste some text into a field, for example, a 'keydown' event will see 'shift' and 'v' pressed, while a keypress handler will see the actual text you pasted in.

There may be other cases where keypress is necessary, but I'm not aware of them.

If you do use keypress, keep in mind that the key value is extrapolated from the char value, and so may not accurately represent the key pressed. If you need accuracy for the key, use the 'keydown' event.

License

Released under the MIT license: http://opensource.org/licenses/MIT