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 {
  font-size: 10px;
  margin-top: 200px;
}

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

.ui-keyboard-enter {
  height: 4em;
  position: absolute;
  top: 2em;
  right: 2px;
}

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$('#keyboard').keyboard({
  layout: 'custom',
  customLayout: {
    'default': [
      'd e f a u l t {sp:2} {enter}',
      '{meta1} {meta2} {accept} {cancel} {sp:1}'
    ],
    'meta1': [
      'm y m e t a 1 {sp:2} {enter}',
      '{meta1} {meta2} {accept} {cancel} {sp:1}'
    ],
    'meta2': [
      'M Y M E T A 2 {sp:2} {enter}',
      '{meta1} {meta2} {accept} {cancel} {sp:1}'
    ]
  },
  display: {
    'meta1': '\u2666', // Diamond
    'meta2': '\u2665'
  }
});