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>
<table>
  <thead>
    <th>Test</th>
  </thead>
  <tbody>
    <tr>
      <td>edit me</td>
    </tr>
    <tr>
      <td>edit me</td>
    </tr>
  </tbody>
</table>

JavaScript

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

  $('table').on('click', 'td', function(e) {
    var $cell = $(e.target),
      value = $cell.text();
    $cell.html('<input data-value="' + value + '" value="' + value + '">');
    initKB($cell.find('input'));
  });

  function initKB($input, value) {
    $input
      .keyboard({
        autoAccept: true,
        initialized: function(e, kb) {
          kb.reveal();
        }
      })
      // activate the typing extension
      .addTyping({
        showTyping: true,
        delay: 250
      })
      .on('accepted canceled', function(e, kb, el) {
        var value = e.type === 'canceled' ? $(el).data('value') : el.value;
        removeKB($(el).closest('td'), value);
      });
  }

  function removeKB($cell, value) {
    $cell.find('input').getkeyboard().destroy();
    $cell.text(value);
  }

});