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="wrap">
  <input id="keyboard" type="text">
</div>

CSS

body {
  font-size: 10px;
  margin-top: 100px;
}

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

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard
Captialize first letter and letters immediately after a '. ' (period + space)
*/
$(function() {
  $('#keyboard').keyboard({

      visible: function(e, kb) {
        if ($.keyboard.caret(kb.$preview).start === 0) {
          kb.showKeySet('shift');
        }
      },
      change: function(e, kb) {
        var caret = $.keyboard.caret(kb.$preview),
          end = caret.end - 2 >= 0 ? caret.end - 2 : caret.end;
        str = kb.$preview.val().substring(end, caret.end);
        if (!/shift|lock/i.test(kb.last.key)) {
          kb.shiftActive = (caret.start === 0 || str.indexOf('. ') >= 0);
          kb.showKeySet();
        }
      }

    })
    // activate the typing extension
    .addTyping();
});