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;
}

JavaScript

$(function() {
  // milliseconds before a hovered key is first typed
  var regularKeyHoverTimer = 200;
  // milliseconds (ms) unitl the hover key starts repeating
  var regularKeyHoverRepeat = 1000;
  // approximate repeat rate in characters per second
  var regularKeyRepeatRate = 3;
  // milliseconds before an action (shift, accept & cancel) is performed
  // we don't want to repeat action keys!
  var actionKeyHoverTimer = 1000;

  var internalTimer, lastKey;

  function startTimer($key, isAction) {
    clearTimeout(internalTimer);
    // if it's an action key, wait longer AND do not repeat
    internalTimer = setTimeout(function() {
      // use 'mousedown' to trigger typing
      $key.trigger('mousedown');
    }, isAction ? actionKeyHoverTimer : regularKeyHoverTimer);
  }

  $('#keyboard').keyboard({
    // open the keyboard popup on input mouseenter
    openOn: 'mouseenter',
    repeatDelay: regularKeyHoverRepeat,
    repeatRate: regularKeyRepeatRate,
    visible: function(event, keyboard) {
      keyboard.$keyboard.find('button')
        .on('mouseenter', function(event) {
          var $key = $(this),
            action = $key.attr('data-action'),
            isAction = action in $.keyboard.keyaction;
          // don't repeat action keys
          if (isAction && keyboard.last.key === action) return;
          startTimer($key, isAction);
        })
        .on('mouseleave', function() {
          clearTimeout(internalTimer);
        });
      },
      hidden: function() {
        clearTimeout(internalTimer);
      }
    });
});