Virtual Keyboard Playground

https://github.com/Mottie/Leopard

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>
<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" class="keyboard" type="text">
    <br/><br/>            
    <input id="keyboard2" class="keyboard" type="text">
    <br/><br/>    
    <input id="keyboard3" class="keyboard" type="text">
</div>

CSS

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

.ui-keyboard {
bottom: 0 !important;
z-index: 16000;
top: auto !important;
position: fixed !important;
border-radius: 0 0 0 0;
}

JavaScript

$.keyboard.keyaction.accept = function (base) {
                base.close(true);
            return false;
        };

        $.keyboard.keyaction.minimise = function (base) {
            base.close(true); // same as base.accept();
            return false;     // return false prevents further processing
        };     

$.keyboard.keyaction.previous = function (base) {
            var inputs = $('input.keyboard:visible'),
                        len = inputs.length - 1,
                        indx = inputs.index(base.$el);

            var n = indx - 1;
            if (n < 0) {
                return;
            }
            base.close(true); // true = auto accept
            // set focus to previous input
            inputs.eq(n).focus();
            //return false;
        };

        $.keyboard.keyaction.next = function (base) {
            var inputs = $('input.keyboard:visible'),
                        len = inputs.length - 1,
                        indx = inputs.index(base.$el);

            var n = indx + 1;
            if (n > len) {
                return;
            }
            base.close(true); // true = auto accept
            // set focus to next input
            inputs.eq(n).focus();
            //return false;
        };

        $.keyboard.layouts['athena'] = {
            'default': [
                "{minimise} Q W E R T Y U I O P {bksp}",
                'A S D F G H J K L ',
                "{previous} Z X C V B N M . {next}",
                "{meta2} {space} @ {accept}"
          ],
            'meta1': [
                "{minimise} Q W E R T Y U I O P {bksp}",
                'A S D F G H J K L ',
                "{previous} Z X C V B N M . {next}",
                "{meta2} {space} @ {accept}"
          ],
            'meta2': [
                '{minimise} 1 2 3 4 5 6 7 8 9 0 {bksp}',
                "= + ! ? # $ £ € % & | ~ *",
                "{previous} [ ] - _ / \\ : ' . {next}",
                "{meta1} {space} @ {accept}"
 ...