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://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="wrap">
    <input id="keyboard" type="text" />
</div>

CSS

.ui-keyboard h2 {
    height: 10px;
    margin: 3px;
    background: #eee;
    cursor: move;
}


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

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function () {

    /*
     Make keyboard draggable
    */

    $('#keyboard').keyboard({
        visible: function (e, keyboard, el) {
            keyboard.$keyboard.prepend('<h2/>')
                .draggable({
                handle: "h2",
                containment: "window"
            });
        }
    })
    // activate the typing extension
    .addTyping({
        showTyping: true,
        delay: 50
    });

});