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>
<script src="https://mottie.github.io/Keyboard/dist/layouts/keyboard-layouts-microsoft.min.js"></script>
<div id="wrap">
  <input id="keyboard" type="text" />
</div>

CSS

body {
  margin-top: 100px;
}

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

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
  $.keyboard.keyaction.num = function(kb) {
    kb.redraw("numpad");
  };
  $.keyboard.layouts.numpad = {
    lang: ["en"],
    normal: [
      '= ( ) {b}',
      '{clear} / * -',
      '7 8 9 +',
      '4 5 6 {sign}',
      '1 2 3 %',
      '0 {dec} {a} {c}',
      '{de} {en} {num}'
    ]
  };

  $.keyboard.keyaction.de = function(kb) {
    kb.redraw("de");
  };
  $.keyboard.layouts.de = {
    lang: ["de"],
    normal: [
      "^ 1 2 3 4 5 6 7 8 9 0 ß ´ {bksp}",
      "{tab} q w e r t z u i o p ü +",
      "a s d f g h j k l ö ä # {enter}",
      "{s} < y x c v b n m , . - {s}",
      "{a} {alt} {space} {alt} {c} {de} {en} {num}"
    ],
    shift: [
      '° ! " § $ % & / ( ) = ? ` {bksp}',
      "{tab} Q W E R T Z U I O P Ü *",
      "A S D F G H J K L Ö Ä ' {enter}",
      "{s} > Y X C V B N M ; : _ {s}",
      "{a} {alt} {space} {alt} {c} {de} {en} {num}"
    ],
    alt: [
      "{empty} {empty} ² ³ {empty} {empty} {empty} { [ ] } \\ {empty} {bksp}",
      "{tab} @ {empty} € {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} ~",
      "{empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {enter}",
      "{s} | {empty} {empty} {empty} {empty} {empty} {empty} µ {empty} {empty} {empty} {s}",
      "{a} {alt} {space} {alt} {c} {de} {en} {num}"
    ]
  };
  $.keyboard.keyaction.en = function(kb) {
    kb.redraw("en");
  };
  $.keyboard.layouts.en = {
    'normal': [
      '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
      '{tab} q w e r t y u i o p [ ] \\',
      'a s d f g h j k l ; \' {enter}',
      '{shift} z x c v b n m , . / {shift}',
      '{accept} {space} {cancel} {de} {en} {num}'
    ],
    'shift': [
      '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
      '{tab} Q W E R T Y U I O P { } |',
      'A S D F G H J K L : " {enter}',
      '{shift} Z X C V B N M < > ? {shift}',
      '{accept} {space} {cancel} {de} {en} {num}'
    ]
  };

 ...