A translator for javascript keyboard events to and from understandable english.
keysightA 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.
Its lightweight at 1.06KB minified and gzipped.
myCanvas.addEventListener("keydown", function(event) {
var key = keysight(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 {
var char = keysight(event).char
if(char === 'r') {
reload()
} else if(char === 'R') {
secondaryReload()
}
}
})
textfield.addEventListener("keypress", function(e) {
var validChars = ['0','1','2','3','4','5']
var char = keysight(event).char
if(validChars.indexOf(char) === -1))
event.preventDefault() // prevent the character from being input
})
Mapping browser keyboard events to actual characters has always been a struggle because of browser inconsistencies, and inconsistencies between 'keydown' and 'keypress' events. No library seems to have existed to solve this problem, so I created one.
npm install keysight
// or
bower install keysight
Accessing keysight:
// node.js
var keysight = require('keysight')
// amd
require.config({paths: {keysight: '../dist/keysight.umd.js'}})
require(['keysight'], function(keysight) { /* your code */ })
// global variable
<script src="keysight.umd.js"></script>
keysight; // keysight.umd.js can define keysight globally if you really
// want to shun module-based design
Using keysight:
keysight(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")ctrl - True if the 'ctrl' key is pressed.shift - True if the 'shift' key is pressed.alt - True if the 'alt' key is pressed.cmd - True if the 'cmd' key is pressed.keysight.unprintableKeys - A map of unprintable keys (including backspace and delete, which do usually modify inputs) where each object-key is the name of an unprintable keyboard-key
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:
char value for this will be '0'.char value for this will be '1'.char value for this will be '\n'.char value for this will be '-'.char value for this will be '.'.char value for this will be '/'.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.
Anything helps:
How to submit pull requests:
npm install at its rootnode test/testServer) to verify that your change works.unprintableKeys array.Thanks goes out to dmauro who's Keypress module is where I got most of the keymapping information from.
Released under the MIT license: http://opensource.org/licenses/MIT
FAQs
A translator for javascript keyboard events to and from understandable english.
We found that keysight demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.