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>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.js"></script>
<p>Example of using codemirrors hidden input field as target for keyboard</p>
<div id="wrap" style="width:99%; height:100vh;">
  <textarea id="keyboard" rows="52" cols="80" placeholder="Enter Text..." style="width:98%;"></textarea>
</div>

JavaScript

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

  var editor = CodeMirror.fromTextArea(document.getElementById("keyboard"), {
      lineNumbers: true
    }),
    inf = editor.getInputField();

  $(inf).keyboard({
    keyBinding: "mousedown touchstart",
    usePreview: false,
    // lockInput: true,
    autoAccept: true,
    alwaysOpen: true,
    position: {
      of: $(".CodeMirror"), // optional - null (attach to input/textarea) or a jQuery object (attach elsewhere)
      my: 'center top',
      at: 'center bottom',
      at2: 'center bottom' // used when "usePreview" is false (centers keyboard at bottom of the input/textarea)
    },
    beforeInsert: function(evnt, keyboard, elem, txt) {
      var position = editor.getCursor();
      if (txt === "\b") {
        editor.execCommand("delCharBefore");
      }
      if (txt === "\b" && position.ch === 0 && position.line !== 0) {
        elem.value = editor.getLine(position.line) || "";
        txt = "";
      }
      return txt;
    }
  });

});