Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-extender.js"></script>
<div id="wrap">
    <input id="keyboard" type="text" />
</div>

CSS

/* https://github.com/Mottie/Keyboard
 * Extender extension demo
   Documentation for this extension can be found at
   https://github.com/Mottie/Keyboard/wiki/Setup#extender
 
 * Click the button with the keyboard icon to toggle the extender layout
*/

 /* this definition in keyboard.css includes the white icon for 
    ui-darkness theme, so we need to use a dark icon here */
 button.ui-keyboard-button.ui-keyboard-extender span {
    background-image: url(https://mottie.github.io/Keyboard/docs/css/images/keyboard.png);
    position:relative;
    top:4px;
 }

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

JavaScript

$(function () {
    $('#keyboard').keyboard({
        layout: 'custom',
        customLayout: {
            'normal': [
                '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
                '{tab} q w e r t y u i o p [ ] \\',
                'a s d f g h j k l ; \' {enter}',
                '{shift} z x c v b n m , . / {shift}',
                '{accept} {space} {cancel} {extender}'],
                'shift': [
                '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
                '{tab} Q W E R T Y U I O P { } |',
                'A S D F G H J K L : " {enter}',
                '{shift} Z X C V B N M < > ? {shift}',
                '{accept} {space} {cancel} {extender}']
        }
    }).addExtender({
        // choose any layout
        layout: 'numpad',
        // start with extender showing?
        showing: false,
        // reposition keyboard after toggling extender layout
        reposition: true
    });
});