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>
<button type="button">Open Calculator</button>

CSS

body {
  margin: 10px;
}

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

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
  $('button').click(function() {
    openPopup();
  });

  function openPopup() {
    var popup = window.open('', 'calculator', 'width=200,height=275');
    popup.document.write(
      '<html><head><title>Calculator</title>' +
      '<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">' +
      '<style>#keyboard { width: 20px; } .ui-keyboard div { font-size: 1em; }</style>' +
      '<scr' + 'ipt src="https://code.jquery.com/jquery-1.9.1.js"></scr' + 'ipt>' +
      '<scr' + 'ipt src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></scr' + 'ipt>' +
      '<scr' + 'ipt>$(function(){ var kb = $("#keyboard").keyboard({' +
      'layout: "num", hidden: function(){ window.opener.returnValue(kb.val()); window.close(); }' +
      '}); kb.getkeyboard().reveal(); });</scr' + 'ipt>' +
      '</head><body><input id="keyboard" type="text" />' +
      '</body></html>'
    );
    popup.document.close();
  }
});

window.returnValue = function(value) {
  console.log(value);
}