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>
<div id="wrap">
    <input id="keyboard" type="text" />
    <img id="icon" title="Click me!" src="http://mottie.github.com/Keyboard/docs/css/images/keyboard.png" />
</div>

CSS

/* https://github.com/Mottie/Keyboard
 * Typing extension demo
   Documentation for this extension can be found at
   https://github.com/Mottie/Keyboard/wiki/Setup#typing
 
 * Click on the keyboard icon next to the input to start
 * the simulated Typing
*/

body {
    margin-top: 50px;
}
#wrap {
    display: block;
    margin: 0 auto;
    width: 250px;
}

JavaScript

// Simulate typing into the keyboard
// \t or {t} = tab
// \r or \n or {e} = enter
// {l} = caret left
// {r} = caret right
// \b or {b} = backspace (deletes to the left of the caret)
// {d} = delete (deletes to the right of the caret)
var simulateTyping = "{t}Hal{l}{l}{d}e{r}{r}l'o{b}o {e}{t}World";

$('#keyboard')
	.keyboard({
    	layout: 'international',
    	usePreview: false
	})
	// activate the typing extension
	.addTyping({
    	// show typing while using physical keyboard
    	showTyping: true,
    	// prevent physical keyboard from working while
    	// simulating typing is active
    	lockTypeIn: false,
    	// time between characters being typed
    	delay: 250,
      // key highlight time; when `delay` < `hoverDelay`, the lower
      // of the two values is used
      hoverDelay: 250
	});

// Typing Extension
$('#icon').click(function () {
    var kb = $('#keyboard').getkeyboard();
    // typeIn( text, delay, callback );
    // this delay overrides the "delay" option set in addTyping()
    kb.reveal().typeIn(simulateTyping, 200, function () {
        // do something after text is added
        // kb.accept();
    });
});