Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard-dark.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-extender.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<div id="wrap">
    <input id="keyboard" type="text" placeholder="Enter something..." />
</div>

CSS

/* jQuery UI is not loaded! 
  this demo uses the "keyboard-dark.css" theme
  ( https://github.com/Mottie/Keyboard/blob/master/css/keyboard-dark.css )
  to add a basic dark theme to the keyboard

  The theme includes css to position the keyboard
  at the botom of the browser window
*/
 body {
    margin-top: 10px;
    background: #222;
}
textarea, input {
    width: 260px;
    background: #111;
    color: #eee;
    border: #444 1px solid;
    padding: 5px 0;
}
#wrap {
    display: block;
    margin: 0 auto;
    width: 200px;
}

JavaScript

$('#keyboard').keyboard({
    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}',
            '{accept} {space} {left} {right} {sp:.2} {del} {combo} {toggle} {extender}'],
            'shift': [
            '~ ! @ # $ % ^ & * ( ) _ + {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}',
            '{accept} {space} {left} {right} {sp:.2} {del} {combo} {toggle} {extender}']
    },
    usePreview: false,
    acceptValid: true,
    validate: function (kb, val) {
        return val.length > 3;
    }
})
// activate the typing extension
.addTyping({
    showTyping: true,
    delay: 250
}).addExtender({
    layout: 'numpad',
    showing: false,
    reposition: true
});