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="searchField" type="text" /> <a id="keyboard-a" href="#">keyboard A</a>
  <a id="keyboard-b" href="#">keyboard B</a>

</div>
<div id="ds-keyboard-container"></div>

CSS

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

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

#ds-keyboard-container {
  position: fixed;
  bottom: 2em;
  right: 2em;
}

JavaScript

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

  $.keyboard.layouts.custom1 = {
    'default': [
      '{accept}',
      'a b c d e f g'
    ]
  };
  $.keyboard.layouts.custom2 = {
    'default': [
      '{accept}',
      '1 2 3 4 5 6 7'
    ]
  };

  $('#searchField').keyboard({
    openOn: null,
    stayOpen: false,
    alwaysOpen: false,
    autoAccept: true,
    appendTo: '#ds-keyboard-container',
    usePreview: false,
    initialFocus: true,
    layout: 'custom1',
    display: {
      'accept': '&times;',
      'intro': 'klawiatura znaków specjalnych',
      'lock': 'Caps lock'
    }
  });

  // specjalna klawiatura ekranowa / klawiatura ekranowa
  $('#keyboard-a, #keyboard-b').click(function() {
    var kb = $('#searchField').getkeyboard();
    // change layout based on link ID
    kb.options.layout = this.id === 'keyboard-a' ? 'custom1' : 'custom2';
    // open keyboard if layout is different, or time from it last closing is > 200 ms
    if (kb.last.layout !== kb.options.layout || (new Date().getTime() - kb.last.eventTime) > 200) {
      kb.reveal();
    }
  });

});