Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard.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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.30.1/handsontable.full.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.30.1/handsontable.full.min.js"></script>
<div id="example1" class="handsontable"></div>
<div id="example2" class="handsontable"></div>

CSS

/* position keyboard at bottom of the screen - jQuery UI isn't even loaded! */

.ui-keyboard {
  border-radius: 0;
  left: 0;
  top: auto;
  bottom: 0;
  position: fixed;
  width: 100%;
}

body {
  font-size: 14px;
  height: 100%;
}

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

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
var lastInput;

function keyboard() {
  var kb,
    $input = $(':focus');
  if ($input.length) {
    lastInput = $input;
    // close the last keyboard
    kb = lastInput.getkeyboard();
    if (kb) {
      kb.close(true);
    }
    if (!$input.hasClass('.ui-keyboard-input')) {
      $input.keyboard({
        usePreview: false,
        initialFocus: false,
        layout: 'num'
      });
    }
    $input.getkeyboard().reveal();
  }
}

$(function() {

  function getData() {
    return [
      ["", "Kia", "Nissan", "Toyota", "Honda"],
      ["2008", 10, 11, 12, 13],
      ["2009", 20, 11, 14, 13],
      ["2010", 30, 15, 12, 13]
    ];
  }

  var container1 = document.getElementById('example1');
  var container2 = document.getElementById('example2');
  var hot1 = Handsontable(container1, {
    data: getData(),
    startRows: 5,
    startCols: 5,
    minRows: 5,
    minCols: 5,
    maxRows: 10,
    maxCols: 10,
    rowHeaders: true,
    colHeaders: true,
    minSpareRows: 1,
    contextMenu: true,
    comments: true,
    cell: [{
      row: 1,
      col: 1,
      comment: "Test comment"
    }, {
      row: 2,
      col: 2,
      comment: "Sample"
    }],
    afterSelectionEnd: function(instance, col, row, td) {
      this.getActiveEditor().beginEditing();
      keyboard();
    },
  });
  var hot2 = Handsontable(container2, {
    data: getData(),
    startRows: 5,
    startCols: 5,
    minRows: 5,
    minCols: 5,
    maxRows: 10,
    maxCols: 10,
    rowHeaders: true,
    colHeaders: true,
    minSpareRows: 1,
    contextMenu: true,
    comments: true,
    cell: [{
      row: 1,
      col: 1,
      comment: "Test comment"
    }, {
      row: 2,
      col: 2,
      comment: "Sample"
    }],

    afterSelectionEnd: function(instance, col, row, td) {
      this.getActiveEditor().beginEditing();
      keyboard();
    },
  });
})