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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div id="wrap">
  <select data-placeholder="Your Favorite Types of Bear" class="chosen-select" tabindex="17" id="single-label-example">
    <option value=""></option>
    <option selected>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option>
    <option>Sun Bear</option>
    <option>Polar Bear</option>
    <option>Spectacled Bear</option>
  </select>
</div>






<script>
  /* Code to get jQuery UI to work with jQuery 3.4+ ... */
  $.isArray = function(a) {
    return Object.prototype.toString.call(a) === '[object Array]';
  }
  $.isFunction = function(f) {
    return typeof f === 'function';
  }
  $.isWindow = function(w) {
    var toString = Object.prototype.toString.call(w);
    return toString == '[object global]' ||
      toString == '[object Window]' ||
      toString == '[object DOMWindow]';
  }

</script>
<script src="https://mottie.github.io/Keyboard/docs/js/jquery-ui-custom.min.js"></script>

CSS

body {
  margin-top: 100px;
}

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

JavaScript

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

	$('select').on('chosen:ready', function(e, obj) {
    obj.chosen.search_container.find('input').keyboard({
      // Used by jQuery UI position utility
      position: {
        // null = attach to input/textarea;
        // use $(sel) to attach elsewhere
        of: $(document),
        my: 'center bottom',
        at: 'center bottom',
        // used when "usePreview" is false
        at2: 'center bottom'
      },
      reposition: true,
      usePreview: false,
      change: function(e, keyboard, el) {
        keyboard.$el.trigger('keyup.chosen');
        // attempt to keep the chosen dropdown from closing when
        // you click on the keyboard container instead of a key
        obj.chosen.mouse_on_container = true;
      }
    })
    .addTyping({
      showTyping: true,
      delay: 250
    });
  })
  .chosen();

});