Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by nickadeemus2002

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

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}'
            ]
    },
    position: {
        of: null, // null = attach to input/textarea; use $(sel) to attach elsewhere
        my: 'center top',
        at: 'center top',
        at2: 'center bottom' // used when "usePreview" is false
    },

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

    // if true, the keyboard will always be visible
    alwaysOpen: false,
    
    // 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
        'a'     : '\u2714:Accept (Shift-Enter)', // check mark (accept)
        'accept': 'Accept:Accept (Shift-Enter)',
        'alt'   : 'AltGr:Alternate Graphemes',
        'b'     : '\u2190:Backspace', // Left arrow (same as &larr;)
        'bksp'  : 'Bksp:Backspace',
        'c'     : '\u2716:Cancel (Esc)', // big X, close/cancel
        'cancel': 'Cancel:Cancel (Esc)',
        'clear' : 'C:Clear', // clear num pad
        'combo' : '\u00f6:Toggle Combo Keys',
        'dec'   : '.:Decimal', // num pad decimal '.' (US) & ',' (EU)
        'e'     : '\u21b5:Enter', // down, then left arrow - enter symbol
        'enter' : 'Enter:Enter',
        's'     : '\u21e7:Shift', // thick hollow up arrow
        'shift' : 'Shift:Shift',
  ...