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>
<div id="wrap">
  <input id="keyboard" type="text" />
</div>

CSS

body {
  margin-top: 100px;
}

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

JavaScript

$.keyboard.keyaction.th = function(kb) {
  kb.redraw("th");
  mouseOverClick(kb);
};
$.keyboard.layouts.th = {
  lang: ["th"],
  normal: [
    "\u005F \u0E45 \u002F \u002D \u0E20 \u0E16 \u0E38 \u0E36 \u0E04 \u0E05 \u0E08 \u0E02 \u0E0A {bksp}",
    "\u0E46 \u0E44 \u0E33 \u0E1E \u0E30 \u0E31 \u0E35 \u0E23 \u0E19 \u0E22 \u0E1A \u0E25 \u0E03 ",
    "\u0E1F \u0E2B \u0E01 \u0E14 \u0E40 \u0E49 \u0E48 \u0E32 \u0E2A \u0E27 \u0E07",
    "{shift} \u0E1C \u0E1B \u0E41 \u0E2D \u0E34 \u0E37 \u0E17 \u0E21 \u0E43 \u0E1D ",
    "{accept}  {space} {en} {cancel}"
  ],
  shift: [
    "% + \u0E51 \u0E52 \u0E53 \u0E54 \u0E39 \u0E3F \u0E55 \u0E56 \u0E57 \u0E58 \u0E59 {bksp}",
    "\u0E50 \u0022 \u0E0E \u0E11 \u0E18 \u0E4D \u0E4A \u0E13 \u0E2F \u0E0D \u0E10 \u002C \u0E05",
    "\u0E24 \u0E06 \u0E0F \u0E42 \u0E0C \u0E47 \u0E4B \u0E29 \u0E28 \u0E0B \u002E",
    "{shift} ( ) \u0E09 \u0E2E \u0E3A \u0E4C \u003F \u0E12 \u0E2C \u0E26",
    "{accept} {space} {en} {cancel}"
  ]
};

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

var debounce;
var lockout = false;
// When switching layouts, the new keyset will trigger a "mouseover"
// on the same key causing it to switch back.
function delayMouseoverOnChangeLayout() {
  lockout = true;
  setTimeout(function() {
    lockout = false;
  }, 200);
}

function mouseOverClick(keyboard) {
  keyboard.$keyboard
    .off('mouseover mouseleave', '.ui-keyboard-button')
    .on('mouseleave', '.ui-keyboard-button', function() {
      clearTimeout(debounce);
    })
    .on('mouseover',...