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>
<p><i>Example of using keyboard with Ace editor. Both textarea and 'accept' are ignored.</i></p>
<hr>
<div id="wrap">
    <div id='editor'>'use strict';

</div>
    <textarea name="keyboard" id="keyboard"></textarea>
</div>
<script src="//ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

CSS

body {
    text-align: center;
}

#wrap {
    width: 99%;
    height: 95vh;
}

#editor {
    height: 150px;
    width: 100%;
    text-align: left;
}

.ui-keyboard-preview-wrapper {
	height: 0;
}

JavaScript

$(window).load(function () {
    
    // ==========================
    // Middleman (stuff to communicate between keyboard and editor)
    // ==========================
    prevEndIndx = 0;
    processInput = function ( keyboard, editor ) {
    /* ( Keyboard, Ace Editor ) -> same Keyboard
    * 
    * Sends appropriate commands to the editor based on
    * key pressed on Keyboard.
    */
	  	var last = keyboard.last;

	  	if ( last.key === 'Bksp' ) {  // If they want to delete
	  		editor.remove( 'left' );
	  	} else {  // If they're entering text
			// Get just the value of the last key (better way?)
		  	var newInput = last.val.substring( prevEndIndx, last.end )
            // Insert it at the cursor
		  	editor.insert( newInput );
	  	}
        
		// Prepare for the next go around
	  	prevEndIndx = last.end;
        // Why not, since we're skipping 'accept' anyway? Will be easier for people using keyboards.
	  	editor.focus();

	  	return keyboard;
	};  // End processInput()
    
    
    // ==========================
    // Ace editor
    // ==========================
	var editor = ace.edit( 'editor' );
	editor.setTheme( 'ace/theme/monokai' );
	editor.getSession().setMode( 'ace/mode/javascript' );
  editor.$blockScrolling = Infinity;
    
    // ==========================
    // Keyboard
    // ==========================
    $( '#keyboard' ).keyboard({
        keyBinding: 'mousedown touchstart',
        autoAccept: true,
        alwaysOpen: true,
        position: {
            of: null,
            my: 'center top',
            at: 'center top',
            at2: 'center bottom'
        },
        layout: 'custom',
        customLayout: {
            'normal': [
                '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
                '{tab} q w e r t y u i o p [ ] \\',
                'a s d f g h j k l ; \' {enter}',
                '{shift} z x c v b n m , . / {shift}',
                '{space} {left} {right}'],
                'shift': [
                '~ ! @...