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>
<audio id="clicky" controls>
  <source...

CSS

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

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

audio {
  visibility: hidden;
}

JavaScript

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

  var addClickSound = function(kb) {
    // only need to run this code once per keyboard
    if (!kb.$keyboard.find('.mute').length) {
      var clicky = $('#clicky')[0];
      kb.isMuted = false;
      // add mute button inside keyboard, but outside of the keysets
      $('<button class="mute">mute</button>').appendTo(kb.$keyboard);
      kb.$keyboard.find('.mute').on('click', function() {
        // toggle clicky noise
        kb.isMuted = !kb.isMuted;
        clicky.muted = kb.isMuted;
        $(this).text(kb.isMuted ? 'unmute' : 'mute');
      });
      // target ALL keys for clicky time!
      kb.$allKeys.on('mousedown.audio', function() {
        // play clicky noise
        clicky.pause();
        clicky.play();
      });
    }
  };

  $('#keyboard').keyboard({
      visible: function(e, keyboard, el) {
        // set up clicky noise after keyboard has been rendered and visible
        addClickSound(keyboard);
      }
    })
    // activate the typing extension
    .addTyping();

});