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>
<div id="wrap">
    <h2>Donation Form</h2>
    <h3>Demo thanks to Casey Zumwalt of <a href="http://simplefocus.com/">SimpleFocus</a></h3>
    <br>
    <form action="#">
        <div class="fieldset-standard">
            <fieldset>

                <div class="fieldset-grouping">
                    <label for="first-name">First Name</label>
                    <input type="text" class="keyboard-normal" id="first-name" name="first-name" value="">
                </div>

                <div class="fieldset-grouping">
                    <label for="last-name">Last Name</label>
                    <input type="text" class="keyboard-normal" id="last-name" name="last-name" value="">
                </div>

                <div class="fieldset-grouping">
                    <label for="address">Address</label>
                    <input type="text" class="keyboard-normal" id="address" name="address" value="">
                </div>

                <div class="fieldset-grouping">
                    <label for="city">City</label>
                    <input type="text" class="keyboard-normal" id="city" name="city" value="">
                </div>

                <div class="fieldset-grouping">
                    <label for="state">State</label>
                    <input type="text" class="keyboard-states" id="state" name="state" value="" maxlength="2">
                </div>

                <div class="fieldset-grouping">
                    <label for="zip-code">Zip Code</label>
                    <input...

CSS

body { font-size: 14px; }

h2 { font-size: 20px; }
form input {
    font-size: 1.2em;
    height: auto;
    padding: 0.5em;
}
form label {
    display: block;
    font-size: 14px;
    padding: 10px 0 0 0;
}
.fieldset-grouping {
    clear: both;
}

.ui-keyboard-nav button {}

/* position keyboard at bottom of the screen - jQuery UI isn't even loaded! */
.ui-keyboard {
    -moz-box-shadow: 0 -15px 15px #FFFFFF;
    -webkit-box-shadow: 0 -15px 15px #FFFFFF;
    -ms-box-shadow: 0 -15px 15px #FFFFFF;
    -o-box-shadow: 0 -15px 15px #FFFFFF;
    box-shadow: 0 -15px 15px #FFFFFF;
    -moz-border-radius: 0 0 0 0 !important;
    -webkit-border-radius: 0 0 0 0 !important;
    -ms-border-radius: 0 0 0 0 !important;
    -o-border-radius: 0 0 0 0 !important;
    border-radius: 0 0 0 0 !important;
    font-family: 'Helvetica Neue', Helvetica, sans-serif !important;
    left: 0px !important;
    top: auto !important;
    bottom: 0px;
    position: fixed !important;
    width: 100%;
}
.ui-keyboard button {
    padding: 0.257em 0.65em 0.397em !important;
    width: auto !important;
}
.ui-keyboard button.ui-keyboard-space {width: 15em !important;}
.ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: 'Helvetica Neue', Helvetica, sans-serif !important;
    font-size: 0.9em !important;
}
.ui-widget input {
    font-family: 'Helvetica Neue', Helvetica, sans-serif !important;
    font-size: 1.75em !important;
    padding: 0.5em !important;
}
input.ui-keyboard-input {
    background: #ffffff !important;
}

input.current {
    border: 1px solid #1581EF !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3), 0 0 4px rgba(21, 129, 239, 0.5) inset !important;
}

.submit-grouping {
    margin-top: 30px;
}

JavaScript

// Add next/previous buttons
var addNav = function(base) {
    base.$el.addClass('current');
    $("body").css('padding-bottom', '250px'); // keep Donate Now button in view
    var inputs = $('input'),
        len = inputs.length - 1,
        indx = inputs.index(base.$el),
        topPadding = 50; // distance from top where the focused input is placed
    // make sure input is in view
    $(window).scrollTop(inputs.eq(indx).offset().top - topPadding);

    // see if nav is already set up
    if (base.$keyboard.find('.ui-keyboard-nav').length) {
        return;
    }

    // add nav window & buttons
    base.$keyboard.append('<div class="ui-keyboard-nav"><button class="prev ui-state-default ui-corner-all">prev</button><button class="next ui-state-default ui-corner-all">next</button></div>');

    base.$keyboard.find('.next').hover(function() {
        $(this).addClass('ui-state-hover');
    }, function() {
        $(this).removeClass('ui-state-hover');
    }).click(function() {
        var n = indx + 1;
        if (n >= len) {
            return;
        }
        base.close(true); // true = auto accept
        // set focus to next input
        inputs.eq(n).focus();
        // make sure input is in view
        $(window).scrollTop(inputs.eq(n).offset().top - topPadding);
    });

    base.$keyboard.find('.prev').hover(function() {
        $(this).addClass('ui-state-hover');
    }, function() {
        $(this).removeClass('ui-state-hover');
    }).click(function() {
        var n = indx - 1;
        if (n < 0) {
            return;
        }
        base.close(true); // true = auto accept
        // set focus to previous input
        inputs.eq(n).focus();
        // make sure input is in view
        $(window).scrollTop(inputs.eq(n).offset().top - topPadding);
    });

}; // end prev/next button code
// Keyboard Layouts
$('.keyboard-normal').keyboard({
    layout: 'qwerty',
    autoAccept: 'true',
    usePreview: false,
    visible: function(e, keyboard, el) {
  ...