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>
<div id="wrap">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non diam vel nisl convallis condimentum non sed arcu. Duis nunc lorem, rutrum quis fermentum et, vulputate id libero. Integer magna nisi, malesuada at ipsum vitae, maximus porta dolor. Fusce pretium diam dui, ut pharetra tortor semper quis. Nam pulvinar tincidunt eros, non sollicitudin nulla semper et. Integer sagittis enim eu tincidunt porttitor. Suspendisse facilisis, eros sit amet iaculis aliquet, ante ipsum aliquet leo, vel elementum nisl lacus vitae dui.
  </p>
  <p>
    Etiam pellentesque felis at sem vestibulum volutpat sed ut neque. Morbi vitae hendrerit sapien. Etiam ultricies est leo, vitae luctus augue tristique scelerisque. Donec bibendum enim sapien, non pellentesque lorem vestibulum nec. Nam neque ex, egestas sed consequat vulputate, lacinia eu felis. Curabitur dignissim metus nulla, et sodales nibh luctus elementum. Nunc justo turpis, pharetra ac elit euismod, convallis aliquam metus. Mauris id elementum felis. Etiam pulvinar suscipit convallis. Phasellus efficitur elementum aliquam. Etiam id porttitor orci. Aenean pulvinar, tellus ut dictum fringilla, sem nisl egestas quam, interdum venenatis nibh lorem id mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam fringilla eget felis sit amet elementum. Donec blandit sed erat sit amet dignissim.
  </p>
  <p class="center">
    <input id="keyboard" type="text" />
  </p>
  <p>
    Vestibulum est lectus, luctus et elit et,...

CSS

body {
  margin-top: 100px;
}

#wrap {
  display: block;
  margin: 0 auto;
  width: 80%;
}

.center {
  text-align: center;
}

.keyboard-modal {
  z-index: 15999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(4px);
}

JavaScript

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

  $('#keyboard').keyboard({
    visible: function(e, keyboard, el) {
      var modal = $('<div class="keyboard-modal"></div>');
      keyboard.$keyboard.before(modal);
      modal.click(function(e) {
        keyboard.accept();
        return false;
      });
    },
    beforeClose: function(e, keyboard, el, accepted) {
      $('.keyboard-modal').remove();
    }
  });

});