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>
<script src="http://mottie.github.com/Keyboard/js/jquery.keyboard.extension-autocomplete.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" type="text">
</div>

CSS

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

.invalid { border-color: red; }
.isvalid { border-color: green; }

JavaScript

$('#keyboard').keyboard({
    acceptValid: true,
    validate: function(keyboard, value, isClosing) {
        // test value for an email address
        var test = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/.test(value);
        // if the value is invalid, clear the input
        if (!test && isClosing) {
            alert('please enter a valid email address');
        }
        // return valid test (true or false)
        return test;
    }
});

$.extend($.keyboard.keyaction, {
    accept: function(base) {
        if (base.accept()) {
            alert('Accepted!');
        }
    }
});