jQuery Keyboard Wiki

A simple plugin for key press and key release detection.

Status: Beta

Brought to you by: bcnobel

HowTo

This piece of code was built on jQuery and MooTools, so you will have to include them into the page on which you want to use this plugin. You will also need to include the jQuery Keyboard plugin itself, but that only seems logical.

This is what a webpage should look like:

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Keyboard Plugin</title>

    <link href="./style/style.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script src="./js/MooTools.js"></script>
    <script src="./js/keyboard/Keyboard.js"></script>

    </head>

    <body></body>

    <script>
    $(document).ready(function() {
            var _keyboard = new Keyboard({
            'keySize' : 55,
        'show' : true,
        'subject' : $(window),
        });
    });
    </script>

</html>

The only thing you need to do is fire a small piece of code inside the <script> tags when the document is fully loaded to actually start listening to the keyboard input.
We do that using the following function:

$(document).ready(function() {
    var _keyboard = new Keyboard({
    'keySize' : 55,
    'show' : true,
    'subject' : $(window),
    });
});

Inside this function we create a new variable to call and initialize the Keyboard class.
The keyboard class simply has 3 options you can use:
1.) keySize
2.) show
3.) subject

The 'keySize' option determines the size of the keys in the visual output in pixels. The default is 32 pixels, but you might want to adjust that if you want a bigger or smaller keyboard on your screen.

The 'show' option determines wether the visual output should actually be shown or not. This plugin is mainly designed to be used for javascript / jquery web applications or games, so a lot of users will probably not be using the visual output. Still, it might come in handy when you want to check what keys your browser detects.

The 'subject' option sets the actual subject to which the plugin will listen for key presses and releases. The most common use will probably be '$(window)' since that will make the plugin listen for keyboard input from the browser itself, however you might want to use the plugin to listen for keyboard input on certain elements, like form inputs.
In that case you just set the 'subject' option to the input id you require.