Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

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>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="wrap">
    <input id="keyboard" type="text" />
</div>

CSS

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

JavaScript

/* Use Bootstrap theme */

/* Note: this plugin only requires the jQuery UI position utility
   from the jQuery UI library, UNLESS you position the keyboard
   on your own; then it becomes optional/unneccessary
*/

$('#keyboard').keyboard({
    layout: 'qwerty',
    css: {
        // input & preview
        input: 'form-control input-sm',
        // keyboard container
        container: 'center-block dropdown-menu', // jumbotron
        // 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'
    }
})
// activate the typing extension
.addTyping({
    showTyping: true,
    delay: 50
});