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>
<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>
<div id="wrap">
  <input id="keyboard" type="text" />
</div>

CSS

.callback {
  color: blue;
}
.event {
  color: green;
}

body {
  margin-top: 20px;
}
#wrap {
  display: block;
  margin: 0 auto;
  width: 200px;
}

JavaScript

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

  function log(e, kb, el, isEvent) {
    $('ul')
      .append('<li class="' +
        (isEvent ? 'event' : 'callback') + '">' +
        e.type + ', "' +
        el.value + '", "' +
        kb.$preview.val() +
        '"</li>')
      .find('li:first')
      .remove();
  }

  $('#keyboard')
    .on('keyboardChange change accepted canceled', function(e, kb, el) {
      log(e, $(this).data('keyboard'), this, true);
    })
    .keyboard({
      usePreview: true,
      change: log,
      accepted: log,
      canceled: log
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });

});