Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/Keyboard/docs/css/bootstrap.min.css">
<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>
<div id="wrap">
    <input id="keyboard" class="dark" type="text" />
</div>

CSS

/* using Bootswatch Darkly theme
 http://bootswatch.com/darkly/
*/
/* override bootstrap active state */
 button.btn-default:active {
    background-color: #FFF;
    -webkit-box-shadow: none;
    box-shadow: none;
}
button.btn-default:active:hover {
    background-color: #3276B1;
}
/* override Bootstrap excessive button padding */
 button.ui-keyboard-button.btn {
    padding: 1px 6px;
}
/* Bootswatch Darkly input is too bright */
 .ui-keyboard-input.light, .ui-keyboard-preview.light {
    color: #282828;
    background: #ddd;
}
.ui-keyboard-input.dark, .ui-keyboard-preview.dark {
    color: #ddd;
    background: #282828;
}
body {
    font-size: 10px;
    margin-top: 200px;
}
#wrap {
    display: block;
    margin: 0 auto;
    width: 200px;
}

JavaScript

$('#keyboard')
	.keyboard({
		layout: 'international',
		css: {
			// input & preview
			// "label-default" for a darker background
			// "light" for white text
			input: 'form-control input-sm dark',
			// keyboard container
			container: 'center-block well',
			// default state
			buttonDefault: 'btn btn-default',
			// hovered button
			buttonHover: 'btn-primary',
			// Action keys (e.g. Accept, Cancel, Tab, etc);
			// this replaces "actionClass" option
			buttonAction: 'active',
			// used when disabling the decimal button {dec}
			// when a decimal exists in the input area
			buttonDisabled: 'disabled'
		}
	})
	.addTyping();