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>
<div id="wrap">
  <input id="keyboard" type="text">
  <br>
  <br>
  <input id="keyboard2" type="text">
</div>

CSS

body {
  margin-top: 100px;
}

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

JavaScript

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

  $('#keyboard, #keyboard2').keyboard({
      position: {
        of: $('#wrap'),
        my: 'center top',
        at2: 'center bottom'
      },
      // true: preview added above keyboard; false: original input/textarea used
      usePreview: false,

      // if true, the keyboard will always be visible
      alwaysOpen: true,

      // ****************
      // resetDefault added in 1.9.19 does the same as the code inside the
      // visible callback function below
      // ****************
      resetDefault: true,

      // Callbacks - attach a function to any of these callbacks as desired
      visible: function(e, keyboard, el) {
        keyboard.shiftActive = keyboard.altActive = keyboard.metaActive = false;
        keyboard.showKeySet();
      }

    })
    // activate the typing extension
    .addTyping();

});