Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Anov Siradj

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">
<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; }

JavaScript

// text that is typed when when pressing the
// keyboard icon (actual code using .typeIn()
// is at the bottom of this code block
var simulateTyping = "Hello World!!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}'
            ]
    },
    // Used by jQuery UI position utility
    position: {
        // null = attach to input/textarea;
        // use $(sel) to attach elsewhere
        of: null, 
        my: 'center top',
        at: 'center top',
        // used when "usePreview" is false
        at2: 'center bottom'
    },

    // true: preview added above keyboard;
    // false: original input/textarea used
    usePreview: true,

    // if true, the keyboard will always be visible
    alwaysOpen: false,

	// give the preview initial focus when the keyboard
    // becomes visible
	initialFocus : true,

    // if true, keyboard will remain open even if
    // the input loses focus.
    stayOpen: false,

    // *** change keyboard language & look ***
    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...