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="keyboard-wrapper">
  First Name:
  <input type="text" class="keyboard">
  <br/> Last Name:
  <input type="text" class="keyboard">
</div>

CSS

#keyboard-wrapper {
  width: 300px;
  margin: 30px auto;
}

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {

  $('.keyboard').keyboard({
    usePreview: false,
    position: {
      of: '#keyboard-wrapper',
      my: 'center top',
      at2: 'center bottom',
      offset: '0 20'
    }
  });


});