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>
<div id="wrap">
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input class="last" type="text" />

</div>

CSS

.ui-keyboard {
  border-radius: 0;
  left: 0;
  top: auto;
  bottom: 0;
  position: fixed;
  width: 100%;
}

body {
  font-size: 14px;
  margin-top: 200px;
}

body {
  margin-top: 100px;
}

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

#wrap input {
  margin-bottom: 40px;
}

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
  $('#wrap input').keyboard({
    usePreview: false,
    autoAccept: true,
    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} {cancel} {prev} {next}'
      ],
      '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} {cancel} {prev} {next}'
      ]
    },
    visible: function(e, keyboard, el) {
      if ($(el).hasClass('last')) {
        keyboard.$keyboard.find('.ui-keyboard-next')
          .text('Submit')
          .attr('data-html', '<span class="ui-keyboard-text">Submit</span>');
      }
    }
  });
});