Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

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 {
  margin-top: 100px;
}

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

JavaScript

/* VIRTUAL KEYBOARD DEMO
 See https://github.com/Mottie/Keyboard/issues/467
*/
$(function() {
  $.keyboard.layouts.numpad = {
    'normal': [
      '= ( ) {b}',
      '{clear} / * -',
      '7 8 9 +',
      '4 5 6 {sign}',
      '1 2 3 %',
      '0 {dec} {a} {c}'
    ]
  };
  $('#keyboard').keyboard({
      layout: 'numpad',
      change: function(e, kb) {
        // code modified from http://stackoverflow.com/a/2901298/145346
        var diff,
          $el = kb.$preview,
          caret = $.keyboard.caret($el),
          parts = $el.val().toString().split('.'),
          len = parts[0].length;
        parts[0] = parts[0].replace(/,/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        $el.val(parts.join('.'));
        // re-align caret
        diff = parts[0].length - len;
        caret.start += diff;
        caret.end += diff;
        $.keyboard.caret($el, caret);
      }
    })
    .addTyping({
      showTyping: true,
      delay: 250
    });
});