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

CSS

body {
  margin-top: 100px;
}

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

#timer {
  float: right;
  display: none;
}

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
  var closeTimer,
    timeUntilClose = 3000; // 3 seconds

  function updateTimer(e, kb) {
    clearTimeout(closeTimer);
    closeTimer = setTimeout(function() {
      kb.close(kb.options.autoAccept);
    }, timeUntilClose);
  }

  $('#keyboard').keyboard({
      // keep any changes
      autoAccept: true,
      visible: updateTimer,
      change: updateTimer,
      beforeClose: updateTimer
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });
});