Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard.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>
<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.extension-caret.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="wrap">
    Text Input:<br/>
    <input class="keyboard" type="text" />
    <img class="icon" src="http://mottie.github.com/Keyboard/docs/css/images/keyboard.png" />
    <div class="spacer"></div>
    Password Input:<br/>
    <input class="keyboard" type="password" />
    <img class="icon" src="http://mottie.github.com/Keyboard/docs/css/images/keyboard.png" />
</div>

CSS

/* caret "after" content visible outside of keyboard popup */
.ui-keyboard-preview-wrapper {
    overflow: visible;
}
/* add caret character preview popup */
.ui-keyboard-caret:after {
    content: attr(data-character);
    background: red;
    color: white;
    font-family: Verdana, Tahoma, Segoe, sans-serif;
    font-size: 1.1em;
    min-width: 1em;
    position: absolute;
    z-index: 100;
    top: -1.4em;
    left: -.5em;
}
/* for password, set font to monospace to ensure caret stays lined up */
input[type=password] {
	font-family: monospace !important;
}


/* jsFiddle demo stuff */
body {
    font-size: 12px;
    margin-top: 200px;
}
#wrap {
    display: block;
    margin: 0 auto;
    width: 200px;
}
.spacer {
    height: 20px;
}

JavaScript

var simulateTyping = "Hello World!";

$('.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} {left} {right}'
			],
			'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} {left} {right}'
			]
		}
    })
    .addTyping()
    .addCaret({
        caretClass: '',
        // *** for future use ***
        // data-attribute containing the character(s) next to the caret
        charAttr: 'data-character',
        // # character(s) next to the caret (can be negative for RTL)
        // default is 1 which shows the character to the right of the caret
        // setting this to -1 shows the character to the left
        charIndex: -1,
        // tweak caret position & height
        offsetX: 0,
        offsetY: 0,
        adjustHt: 0
    });

// Typing Extension
$('.icon').click(function () {
    var kb = $(this).prev().getkeyboard();
    // typeIn( text, delay, callback );
    kb.reveal().typeIn(simulateTyping, 500, function () {
        // do something after text is added
        // kb.accept();
    });
});