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>
<h1>
    Press Tab or Enter to go to the next input/textarea<br/>
    Use shift-enter for the textarea<br/>
    Press Shift-Tab to go to the previous input<br/>
    Use Shift-Alt-Enter to leave the textarea and go to the previous input
</h1>
<div id="wrap">
  <input class="keyboard" type="text">
  <input class="keyboard" type="text">
  <textarea class="keyboard" placeholder="use shift-enter"></textarea>
  <input class="keyboard" type="text">
  <input class="keyboard" type="text">
</div>

CSS

body {
  margin-top: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

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

JavaScript

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

  $('.keyboard')
    .keyboard({
      stickyShift: false,
      usePreview: false,
      autoAccept: true,
      tabNavigation: true,
      enterNavigation: true, // new option
      position: {
        of: "#wrap",
        my: "center top",
        at2: "center bottom"
      }
    })
    .addTyping();

});