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://mottie.github.io/Keyboard/js/jquery.keyboard.extension-scramble.js"></script>
<div id="wrap">
    <input id="keyboard" type="text" />
</div>

CSS

/* https://github.com/Mottie/Keyboard
 * Scramble extension demo
   Documentation for this extension can be found at
   https://github.com/Mottie/Keyboard/wiki/Setup#scramble
*/
 body {
    margin-top: 50px;
}
#wrap {
    display: block;
    margin: 0 auto;
    width: 200px;
}

JavaScript

$(function () {

    $('#keyboard')
        .keyboard({
        	layout: 'international',
        	usePreveiw: false
    	})
        .addScramble({
        	// keys to randomize (default setting shown)
        	targetKeys: /[a-z\d]/i,
        	// randomize by row, otherwise randomize all keys
        	byRow: true,
        	// if true, randomize one keyset & duplicate
        	byKeySet: true,
        	// if false, randomize every time the keyboard opens
        	randomizeOnce: true
    	});

});