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">
  <div>
    <h4>To delete a word,</h4>
    <ul>
      <li>on the physical keyboard use <kbd>Ctrl</kbd>+<kbd>Bksp</kbd></li>
      <li>on the virtual keyboard use <kbd>Alt</kbd>+<kbd>Bksp</kbd></li>
    </ul>
  </div>
  <br>
  <br>
  <input id="keyboard" type="text" value="The quick brown fox jumps over the lazy dog" />
</div>

CSS

body {
  margin-top: 100px;
}

#wrap {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 500px;
}
#wrap div {
  text-align: left;
}

JavaScript

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

  function deleteToPrevWhiteSpace(base, pos) {
    var regex = /\s/,
      val = base.$preview.val(),
      index = pos.end - 1;
    // Look for whitespace left of caret
    while (index > 0 && !regex.test(val.substring(index - 1, index))) {
      index--;
    }
    val = val.substring(0, index) + val.substring(pos.end, val.length);
    base.$preview.val(val);
    base.saveCaret(index, index);
  }

  // Physical keyboard = ctrl + bksp
  // Virtual keyboard = alt + bksp
  $.keyboard.keyaction.bksp = function(base, keyElm, e) {
    if (base.isContentEditable) {
      base.execCommand('delete');
      // save new caret position
      base.saveCaret();
    } else {
      var pos = $.keyboard.caret(base.$preview);
      // Don't delete to prev whitespace if content is selected
      if ((e.ctrlKey || base.altActive) && pos.start === pos.end) {
        deleteToPrevWhiteSpace(base, pos);
      } else {
        // the script looks for the '\b' string and initiates a backspace
        base.insertText('\b');
      }
    }
  };

  $('#keyboard').keyboard({
      layout: 'international'
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });

});