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

.ui-keyboard-inv span {
  color: green;
  font-weight: bold;
  font-size: 1.2em;
}

.ui-keyboard-inv.subtract span {
  color: red;
}

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

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

JavaScript

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

  $.keyboard.layouts.numpad = {
    'default': [
      '{1/4} {1/2} {3/4} {inv}',
      '= ( ) {b}',
      '{clear} / * -',
      '7 8 9 +',
      '4 5 6 {sign}',
      '1 2 3 %',
      '0 {dec} {a} {c}'
    ]
  }

  $.extend($.keyboard.keyaction, {
    '1/4': function(kb) {
      kb.$preview.val(function(i, v) {
        return (parseFloat(v) || 0) + (.25 * (kb.invert ? -1 : 1));
      });
    },
    '1/2': function(kb) {
      kb.$preview.val(function(i, v) {
        return (parseFloat(v) || 0) + (.5 * (kb.invert ? -1 : 1));
      });
    },
    '3/4': function(kb) {
      kb.$preview.val(function(i, v) {
        return (parseFloat(v) || 0) + (.75 * (kb.invert ? -1 : 1));
      });
    },
    'inv': function(kb) {
      kb.invert = !kb.invert;
      kb.$keyboard.find('.ui-keyboard-inv').toggleClass('subtract', kb.invert);
    }
  });

  $('#keyboard')
    .keyboard({
      layout: 'numpad',
      usePreview: false,
      display: {
        '1/4': '\u00BC',
        '1/2': '\u00BD',
        '3/4': '\u00BE',
        'inv': '\u00B1:Add or Subtract fractions'
      }
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 50
    });

});