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 class="keyboard" type="text" data-unit="PSI" value="102.27 PSI">
  <br>
  <br>
  <input class="keyboard" type="text" data-unit="km" value="100 km">
</div>

CSS

body {
  font-size: 12px;
  margin-top: 200px;
}

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

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
  $('.keyboard').keyboard({
    layout: 'num',
    hidden: function(e, keyboard, el) {
      var unit = $(el).attr('data-unit');
      $(el).val(function(indx, val) {
        if (val.replace(/[^\d,. \-()]/g, "") === '') {
          return "";
        } else if (/\w/.test(val)) {
          return $.trim(val.replace(/[^\d,. \-()]/g, "")) + ' ' + unit;
        } else {
          return val + ' ' + unit;
        }
      });
    },
    visible: function(e, keyboard, el) {
      keyboard.$preview.val(function(indx, val) {
        return $.trim(val.replace(/[^\d,. \-()]/g, ""));
      });
      keyboard.$preview[0].select();
    }
  })
});