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

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

JavaScript

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

  var maxInteger = 3,
    maxFractional = 2,

    regex = new RegExp(`([+-]?\\d{${maxInteger}}(?:\\.\\d{0,${maxFractional}})?)`);

  $('#keyboard').keyboard({
    layout: 'custom',
    customLayout: {
      'normal': [
        '7 8 9 {b}',
        '4 5 6 {clear}',
        '1 2 3 {c}',
        '0 {dec} {empty} {a}'
      ]
    },
    restrictInput: true,
    change: function(e, keyboard, el) {
      var change,
        val = keyboard.$preview.val().replace(/[^\d-.]/g, ''),
        c = $.keyboard.caret(keyboard.$preview),
        start = c.start,
        end = c.end,
        restrict = val.match(regex);
      if (restrict) {
        restrict = restrict.slice(1).join('');
      } else {
        restrict = val;
      }
      keyboard.$preview.val(restrict);
      change = restrict.length - val.length;
      start += change;
      end += change;
      $.keyboard.caret(keyboard.$preview, start, end);
      // enable/disable decimal key as needed
      keyboard.checkDecimal();
    }
  });

});