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 {
  font-size: 12px;
  margin-top: 200px;
}

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

.ui-keyboard-lock {
  float: right;
}

JavaScript

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

  $('#keyboard').keyboard({
      // Prevents direct input in the preview window when true
      lockInput: true,

      visible: function(e, kb, el) {
        if (!kb.$keyboard.find('.ui-keyboard-lock').length) {
          kb.$keyboard.append('<button class="ui-keyboard-button ui-keyboard-lock ui-state-default ui-corner-all"><span class="ui-icon-locked ui-icon"></span></button>');
          kb.$keyboard.find('.ui-keyboard-lock').click(function() {
            var locked = !kb.options.lockInput;
            kb.options.lockInput = locked;
            kb.$preview
              .toggleClass('ui-keyboard-lockedinput', locked)
              .prop('readonly', locked);
            $(this).find('span')
              .toggleClass('ui-icon-locked', locked)
              .toggleClass('ui-icon-unlocked', !locked);
          });
        }
      }

    })
    // activate the typing extension
    .addTyping();

});