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

keyboard-js

v1.1.4

Published

JavaScript Key Binding Library

Downloads

30

Readme

keyboard-js

A little library for keyboard binding. Now, it just supports chrome.

If you want to support more browsers or nodejs platform, just fork it.

Have fun, XD.

Usage

Full list of key values

Try it

Now, you can try it here. (source)

And, you can find which key(key combo will print on the console.) do you press at that page, when you find your code didn't run.

Quickly start

var Keyboard = require('keyboard-js').Keyboard
var keyboard = new Keyboard() // pay more attention: singal instance

// start to listen
keyboard.start()

// register
// when you hit <kbd>Shift+e</kbd> or <kbd>Ctrl+e</kbd> that will print `> test uk successfully`.
keyboard.register('uk', function (event) {
    // event.preventDefault()
    // event.stopPropagation()
    // event.stopImmediatePropagation()

    console.log('test uk successfully.')

    // event.clearKeys() // if you use function::alert or function::confirm
}, ["Shift", "E"], ["Control", "e"]) // attention: Shift E (not e)

// have fun :)

PLEASE DO NOT USE ALERT OR CONFIRM FOR YOUR FAMILY!

Dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed

  • Window.alert()
  • Open this and then press Ctrl + F to find This key combo keeps activating even though I'm not pressing the keys
  • If you really want to use, please don't forget to call event.clearKeys() in the callback

OMG! Please forgive me.

Attention

Please pay more attention to the key combo. You should avoid the key conflict. For example, if you registe the Shortcut Key: Shift + B, you will be confused when you hit Shift + B in the textarea. So, be careful.

However, you can use API::Keyboard.end() to end when the textarea is focused and use API::Keyboard.start() to restart when it blurs. Also, you can discard the Shortcut Key: Shift + B.

API

Constructor Options

{
    DEBUG: [boolen], // default: false. If true, it will print key message on the console.
    element: [DOM Element], // default: document. Use this to listen the keydown or keyup.
}

Exposed Interface:

Keyboard.start(): start to listen the keypress event
Keyboard.end():  end to listen keypress event and clean some resource
Keyboard.register(name:String, callback:Function, [key1:String, key2:String,...], ...): registe the keyboard binding
Keyboard.unregister(name:String): remove the register by name
Keyboard.getStatistic(): get the key pressing information

And the callback defination:

// callback
function callback (event) {
    // event.preventDefault()
    // event.stopPropagation()
    // event.stopImmediatePropagation()

    // your code here
    // ...

    // event.clearKeys() // if you use function::alert or function::confirm
}

Annexation

A keyboard layout Library (keyboard-layout.js) heatmap

Samples

You can find here

Bug

If you find bugs or have any questions, you can submit them to the github issues.

LICENSE

MIT