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>
<div id="dialog" title="Basic dialog">
  <input id="keyboard" type="text" />
</div>
<button id="opener">Open Dialog</button>

CSS

#dialog {
  /* center the input */
  text-align: center;
}

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
  $('#keyboard').keyboard({
      openOn: null,
      stayOpen: true,
      usePreview: false,
      autoAccept: true,
      accepted: function(e, keyboard, el) {
        console.log('accepted');
        $('#dialog').dialog("close");
      },
      canceled: function(e, keyboard, el) {
        $('#dialog').dialog("close");
      },
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 50
    });

  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    width: 450,
    height: 250,
    open: function(event, ui) {
      $('#keyboard').getkeyboard().reveal();
    }
  });

  $("#opener").click(function() {
    $("#dialog").dialog("open");
  });
});