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 {
  margin-top: 100px;
}

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

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
  var remapGreek = {
    // use key: value pairs to remap the keys
    "A": "Α", "B": "Β", "D": "Δ", "E": "Ε", "H": "Η", "I": "Ι",
    "K": "Κ", "L": "Λ", "M": "Μ", "N": "Ν", "O": "Ο", "P": "Π",
    "R": "Ρ", "S": "Σ", "T": "Τ", "X": "Χ", "Y": "Υ", "Z": "Ζ",
    "F": "Φ", "G": "Γ", "J": "Ξ", "C": "Ψ", "V": "Ω", "U": "Θ",

    "a": "α", "b": "β", "d": "δ", "e": "ε", "h": "η", "i": "ι",
    "k": "κ", "l": "λ", "m": "μ", "n": "ν", "o": "ο", "p": "π",
    "r": "ρ", "s": "σ", "t": "τ", "x": "χ", "y": "υ", "z": "ζ",
    "f": "φ", "g": "γ", "j": "ξ", "c": "ψ", "v": "ω", "u": "θ"
  };

  jQuery.keyboard.layouts['Greek-custom'] = {
    "lang": ["el"],
    // Greek
    "normal": [
      "\\ 1 2 3 4 5 6 7 8 9 0 ' ] {bksp}",
      "{tab} : w ε ρ τ υ θ ι ο π + }",
      "α σ δ φ γ η ξ κ λ \u0384 \u00A8 # {enter}",
      "{shift} < ζ χ ψ ω β ν μ , . - {shift}",
      "{accept} {alt} {space} {alt} {cancel}"
    ],
    "shift": [
      "| ! \" # $ % & / ( ) = ? [ {bksp}",
      "{tab} ; W Ε Ρ Τ Υ Θ Ι Ο Π + }",
      "Α Σ Δ Φ Γ Η Ξ Κ Λ \u00A8 \u0385 @ {enter}",
      "{shift} < Ζ Χ Ψ Ω Β Ν Μ ; : _ {shift}",
      "{accept} {alt} {space} {alt} {cancel}"
    ],
    // latin characters
    "alt": [
      "\\ 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 \u0384 \u00A8 # {enter}",
      "{shift} < z x c v b n m , . - {shift}",
      "{accept} {alt} {space} {alt} {cancel}"
    ],
    "alt-shift" : [
      "| ! \" # $ % & / ( ) = ? [ {bksp}",
      "{tab} Q W E R T Y U I O P * {",
      "A S D F G H J K L \u00A8 \u0385 @ {enter}",
      "{shift} > Z X C V B N M ; : _ {shift}",
      "{accept} {alt} {space} {alt} {cancel}"
    ]
  };

  $('#keyboard').keyboard({
    layout: 'Greek-custom',
    beforeInsert: function(e, keyboard, el, textToAdd) {
      return keyboard.altActive ?
        // don't remap if alt is active
        textToAdd : 
        // remap at...