Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by hslincoln

HTML

<link rel="stylesheet" href="http://mottie.github.com/Keyboard/css/keyboard.css">
<script src="http://mottie.github.com/Keyboard/js/jquery.keyboard.js"></script>
<script src="http://mottie.github.com/Keyboard/js/jquery.mousewheel.js"></script>
<script src="http://mottie.github.com/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script src="http://mottie.github.com/Keyboard/js/jquery.keyboard.extension-autocomplete.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<h2>Press the keyboard icon, Geary </h2>

<div id="wrap">
    <input id="keyboard" type="text">
    <img id="icon" src="http://mottie.github.com/Keyboard/demo/keyboard.png">
</div>

CSS

body { font-size: 10px; margin-top: 200px; }
#wrap { display: block; margin: 0 auto; width: 200px; }
h2 {font-size:18px;text-align:center;}

JavaScript

var simulateTyping = "GET OUT OF MY HEAD, GEARY!!1\b";

$('#keyboard').keyboard({
    // *** choose layout & positioning ***
    // choose from 'qwerty', 'alpha',
    // 'international', 'dvorak', 'num' or 
    // 'custom' (to use the customLayout below)
    layout: 'qwerty',
    customLayout: {
        'default': [
            'd e f a u l t',
            '{meta1} {meta2} {accept} {cancel}'
            ],
        'meta1': [
            'm y m e t a 1',
            '{meta1} {meta2} {accept} {cancel}'
            ],
        'meta2': [
            'M Y M E T A 2',
            '{meta1} {meta2} {accept} {cancel}'
            ]
    },

    position: {

        of: null, 
        my: 'center top',
        at: 'center top',
        // used when "usePreview" is false
        at2: 'center bottom'
    },

    usePreview: true,
    alwaysOpen: false,

	initialFocus : true,

    stayOpen: false,
    display: {
        'meta1' : '\u2666', // Diamond
        'meta2' : '\u2665', // Heart
        // check mark (accept)
        'a'     : '\u2714:Accept (Shift-Enter)',
        'accept': 'Accept:Accept (Shift-Enter)',
        'alt'   : 'AltGr:Alternate Graphemes',
        // Left arrow (same as &larr;)
        'b'     : '\u2190:Backspace',
        'bksp'  : 'Bksp:Backspace',
        // big X, close/cancel
        'c'     : '\u2716:Cancel (Esc)',
        'cancel': 'Cancel:Cancel (Esc)',
        // clear num pad
        'clear' : 'C:Clear',
        'combo' : '\u00f6:Toggle Combo Keys',
        // num pad decimal '.' (US) & ',' (EU)
        'dec'   : '.:Decimal',
        // down, then left arrow - enter symbol
        'e'     : '\u21b5:Enter',
        'enter' : 'Enter:Enter',
        // left arrow (move caret)
        'left'   : '\u2190',
        'lock'  : '\u21ea Lock:Caps Lock',
        'next'   : 'Next \u21e8',
        'prev'   : '\u21e6 Prev',
        // right arrow (move caret)
        'right'  : '\u2192',
        // thick hollow up arrow
        's'     : '\u21e7:Shift',
       ...