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" />
</div>

CSS

.ui-keyboard button.locked {
  border-color: red;
  color: red;
}

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

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

JavaScript

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

  $('#keyboard').keyboard({
      stickyShift: false,
      visible: function(e, kb, el) {
        var timer,
          active = false,
          time = 500; // ms (time of long click)
        kb.$keyboard.find('.ui-keyboard-shift')
          .mouseup(function() {
            clearTimeout(timer);
            if (!active) {
              kb.options.stickyShift = false;
              kb.$keyboard.find('.ui-keyboard-shift').removeClass('locked');
            }
            return false;
          })
          .mousedown(function() {
            active = false;
            timer = setTimeout(function() {
              active = true;
              kb.options.stickyShift = true;
              kb.showKeySet('shift');
              kb.$keyboard.find('.ui-keyboard-shift').addClass('locked');
            }, time);
          });
      }
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });


});