Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard-basic.css">
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.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-basic.css" theme
  ( https://github.com/Mottie/Keyboard/blob/master/css/keyboard-basic.css )
  to add a basic white theme to the keyboard

  The theme includes css to position the keyboard
  at the botom of the browser window
*/
.ui-keyboard span {
  font-size: calc(2em - 1vw);
}
.ui-keyboard-button {
  height: calc(2em - 1vh);
  line-height: calc(2em - 1vh);
  min-width: calc(2em - 5vw);
  margin: .2em;
  cursor: pointer;
}
/* increased specificity to override repositioning style */
div.ui-keyboard button.ui-keyboard-button.ui-keyboard-actionkey > span {
  position: static;
  font-size: calc(.5em + 1vw);
}

body {
  margin-top: 10px;
}

#wrap {
  display: block;
  margin: 0 auto;
  width: 200px;
}

JavaScript

/* Demo for https://github.com/Mottie/Keyboard/issues/538 */
$('#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
  });