Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

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" value="the quick brown fox..." />
</div>

CSS

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

JavaScript

$.keyboard.layouts['qwerty+nav'] = {
	'default': [
		'` 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} {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} {cancel} {left} {right}'
	]
};

$('#keyboard').keyboard({
	layout : 'qwerty+nav'
});