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-previewkeyset.js"></script>
<div id="wrap">
    <input id="keyboard" type="text" />
</div>

CSS

/* https://github.com/Mottie/Keyboard
 * Preview Keyset extension demo
   Documentation for this extension can be found at
   https://github.com/Mottie/Keyboard/wiki/Setup#previewkeyset

 * Display & position of preview keyset is done using css
*/

/*** CSS from keyboard-previewkeyset.css ***/
/* basic previewKeyset setup - modify as desired */
.ui-keyboard-keyset .ui-keyboard-button {
	position: relative;
}
/* show mini-shift keyset with normal keyset */
.ui-keyboard-keyset-normal .ui-keyboard-button::after {
	content: attr(data-shift);
	font-size: 0.6em;
	color: #999;
	position: absolute;
	top: -1em;
	left: 2px;
	z-index: 200;
}
/* show mini-normal keyset with shift keyset */
.ui-keyboard-keyset-shift .ui-keyboard-button::after {
	content: attr(data-normal);
	font-size: 0.6em;
	color: #999;
	position: absolute;
	top: -1em;
	left: 2px;
	z-index: 200;
}
/* show mini-normal keyset with alt keyset */
.ui-keyboard-keyset-alt .ui-keyboard-button::after {
	content: attr(data-alt-shift);
	font-size: 0.6em;
	color: #999;
	position: absolute;
	top: -1em;
	left: 2px;
	z-index: 200;
}
/* show mini-alt-shift keyset with alt-shift keyset */
.ui-keyboard-keyset-alt-shift .ui-keyboard-button::after {
	content: attr(data-alt);
	font-size: 0.6em;
	color: #999;
	position: absolute;
	top: -1em;
	left: 2px;
	z-index: 200;
}



/* demo css*/
body {
    margin-top: 200px;
}
#wrap {
    display: block;
    margin: 0 auto;
    width: 200px;
}

JavaScript

$(function () {
    $('#keyboard')
        .keyboard({
        	layout: 'international'
    	})
        .previewKeyset({
        	// this adds the "data-normal", "data-shift", etc
            // attributes to each key, which can then be used
        	// by the css content: attr()
        	sets: ['normal', 'shift', 'alt', 'alt-shift']
    	});
});