TangibleKeyboard is a flexible and easy to use keyboard binding library. It allows users to attach events to key presses and key combinations without having to worry about conflicts. It is a spin-off of the nice KeyboardJS library created by Robert Hurst.

This particular version adds layouts for various keyboard emulators often used in physical computing to gather input from switches. It also adds explicit support for key repeat prevention. This means you can, if you so wish, ignore repeated keydown events sent by the OS when a key is being held down. This version also allows you to specify whether browser actions tied to certain key combinations should be triggered or not (preventDefault).

Basic Usage

Using TangibleKeyboard is quite simple. Simply link to the JS file and use the on() method to attach a callback. Here’s an example that will trigger a user function when the “a” key is pressed:

 <script src="tangiblekeyboard.js"></script>
 
 <script>
     TangibleKeyboard.on(
         'a',
         {
             onKeyDown: function(e, keys, combo) { console.log(e); }
         }
     );
 </script>

That’s it.

if you want to prevent default browser actions from being triggered, set preventDefault to true. If you want to prevent repeated events from being triggered when a key is being held down, set preventRepeat to true:

 <script>
     TangibleKeyboard.on(
         'a',
         {
             onKeyDown: function(e, keys, combo) { console.log(e); },
             preventDefault: true,
             preventRepeat: true
         }
     );
 </script>

Using a different keyboard layout

TangibleKeyboard is, by default, configured to use the basic qwerty keyboard layout. If you want to use another one, such as the bundled IpacVE layout, you need to assign the layout:

 <script src="tangiblekeyboard.js"></script>
 <script src="layouts/tangiblekeyboard.layout.ipacve.js"></script>
 
 <script>
     TangibleKeyboard.setLayout('ipacve');
 
     TangibleKeyboard.on(
         '1RGHT',
         {
             onKeyDown: function(e, keys, combo) { console.log(e); }
         }
     );
 </script>

Using it with AMD and CommonJS

TangibleKeyboard is compatible with AMD and CommonJS. Here’s an example of using an alternative keyboard layout with AMD:

 define(function (require) {
 
     var tk = require('tangiblekeyboard');
     var layout = require('layouts/tangiblekeyboard.layout.ipacve');
     tk.registerAndSetLayout("ipacve", layout);
 
     tk.on(
         '1RGHT',
         {
             onKeyDown: function(e, keys, combo) { console.log(e); }
         }
     );
 
 });

Download & Documentation

You can download the latest version here or on GitHub. Full API documentation is also available. For all details, this is the best reference.