33

I want to make a BBS forum that using many Keyboard events, so which is the best Keyboard event library?

1
  • "Best" is a hard criteria to match. You might try giving some more detail on what you are trying to accomplish. That way, we can be more specific.
    – Stephano
    Commented Mar 1, 2010 at 1:55

8 Answers 8

34

Just another to throw in the mix. I recently released one called Mousetrap. You can check out examples at http://craig.is/killing/mice

7
  • It is very easy to implement and works like a charm. How is the license for using it in commercial projects? Commented Aug 7, 2013 at 15:51
  • 2
    It uses the Apache 2.0 license.
    – Craig
    Commented Aug 7, 2013 at 19:08
  • It's a great library, but with one major weakness: It does not let you specify the container to bind the events to. It always binds to document. Which is why I had to add some extra focus checks into my callbacks. (My site contains two elements, each with different bindings.)
    – Domi
    Commented Apr 24, 2014 at 12:41
  • 1
    @Domi - As of 1.5 this is now fixed, I believe
    – sifriday
    Commented Apr 29, 2015 at 12:41
  • Simple to use. Elegant functionality. Small. Plugins. Awesome!
    – Daghall
    Commented Jul 28, 2015 at 14:05
13

Try KeyboardJS

its as simple as

KeyboardJS.on('a', function(){ alert('hello!'); });

yet as flexible as

var bindInstance = KeyboardJS.on('ctrl + a, ctrl + b, c', function(event, keysPressedArray, keyComboString){

    //you get the event object
    console.log('event object', event);

    //you get the keys pressed array
    console.log('keys pressed', keysPressedArray);

    //you get the key combo string
    console.log('combo pressed', keyComboString);

    console.log('I will fire when \'ctrl + a\' or \'ctrl +b\' or \'c\' is pressed down');

    //block event bubble
    return false;

}, function(event, keysPressedArray, keyComboString) {

    console.log('I will fire on key up');

    //block event bubble
    return false;

});

you can clear a binding by calling

bindInstance.clear();

you can clear all binds with specific keys with

KeyboardJS.clear('a, b');

Its open source and available on Github. Its comes in ether a global library or an AMD module for RequireJS.

Here's an introduction video.

There, now stop worrying about the keyboard and code your app. ;)

10
  • Seems like a really great script, but as best I can tell it is not working in IE8, which is sadly a problem for me (on several levels). When I go to robertwhurst.github.com/KeyboardJS with IE8 it just says "JS is required". Commented Aug 8, 2012 at 17:56
  • The demo may not work in IE but the library should. It did a couple builds ago. Did you try the library itself? Commented Aug 9, 2012 at 18:02
  • I did not. I will give it a try. Is there tweaking that the demo needs to show off that is can handle all of the browsers? I would be happy to fork and tweak and send a pull request on the demo page. Commented Aug 9, 2012 at 18:13
  • That would be helpful. I'm really swamped with my current project and barley have time to sleep. If you fix the demo I'm accept your pull request. Commented Aug 9, 2012 at 22:45
  • This is the only library of the 4-5 I tested that actually worked for my situation (a div with contenteditable="true"). Thanks @RobertHurst!
    – duma
    Commented Aug 7, 2013 at 3:07
3

KEYPRESS is focused on game input and supports any key as a modifier, among other features. It's also pre-packaged for Meteor.

2

From what I have seen Mousetrap is the only library that let's you specify key sequences rather than combinations. This came in very handy for my application.

1
  • Actually, KeyboardJS has that feature, too.
    – Haroldo_OK
    Commented Feb 8, 2019 at 13:49
1

Lots of JavaScript libraries come replete with ways of capturing key input and using it to your advantage. It's a good bet that you will be able to find a library to do just that, and nothing else. I don't have a lot of experience there, however.

I've been using Ext for a while now, and their KeyMap class is really easy to work with. Here is a simple example using it.

new Ext.KeyMap(Ext.getDoc(), {
        key: 'abc',
        alt: true,
        handler: function(k, e) {
            var t = Ext.getCmp('tabpanel');
            switch(k) {
                case 65:
                    t.setActiveTab(0);
                    break;
                case 66:
                    t.setActiveTab(1);
                    break;
                case 67:
                    t.setActiveTab(2);
                    break;
            }
        },
        stopEvent: true
    });

This takes class, Ext.TabPanel, and allows the user to push a keyboard key to change tabs, rather than clicking the tabs themselves.

It can, of course, do much more than this. This is a simple example of how it works though.

1

This one is pretty good for jquery.

https://github.com/jeresig/jquery.hotkeys

0
-1

This one is better if you are starting and if you want to understand how hot-keys work.

https://github.com/UthaiahBollera/HotkeysInJavascriptLibrary

-3

You can try this one...

http://unixpapa.com/js/key.html

1
  • 2
    -1: This isn't a library - just a reference
    – B T
    Commented Oct 28, 2012 at 20:28

Not the answer you're looking for? Browse other questions tagged or ask your own question.