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>
<p>
  Enter any value, highlight it, then press "+";
  <br> e.g. "99" becomes ":add(99)"
  <br>
  <br> Now, press "+" and notice the cursor is inside the parenthesis
  <br>
  <br>
  <p>

    <div id="wrap">
      <input id="keyboard" type="text">
    </div>

CSS

body {
  margin-top: 100px;
}

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

p {
  text-align: center;
}

JavaScript

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

  $.extend($.keyboard.keyaction, {
    '+': function(kb) {
      // the caret function returns: caret start, end,
      // text and a replace function
      var t = $.keyboard.caret(kb.$el),
        wrap = ':add(${val})',
        txt = wrap.replace('${val}', t.text);
      // replace text (number) with ":add(number)"
      kb.$preview.val(t.replaceStr(txt));

      // move caret inside parenthesis if no selected text
      t = t.end + wrap.split('${val}')[0].length + (t.text === '' ? 0 : 1);
      // add delay or caret doesn't get repositioned
      setTimeout(function(){
      	$.keyboard.caret(kb.$el, t, t);
      }, 1);
    }
  });

  $('#keyboard').keyboard({
    layout: 'custom',
    customLayout: {
      'default': [
        '= ( ) {b}',
        '{clear} / * -',
        '7 8 9 {+}', // ACTION KEY: the plus is in curly brackets
        '4 5 6 {sign}',
        '1 2 3 %',
        '0 . {a} {c}'
      ]
    },

    // true: preview added above keyboard; false: original input/textarea used
    usePreview: false

  });

});