Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Arun Prasad 9946146920

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" />
  <img id="icon" src="https://mottie.github.io/Keyboard/docs/css/images/keyboard.png" />
</div>

CSS

body {
  margin-top: 100px;
}

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

JavaScript

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

  // text that is typed when when pressing the
  // keyboard icon (actual code using .typeIn()
  // is at the bottom of this code block
  var simulateTyping = "Hello World!!1\b <3";

  // create a new language (love, awww) by copying the english language
  // file. we're doing this just for this demo, so we can add "<3" to the
  // combo regex
  $.keyboard.language.love = $.extend($.keyboard.language.en);

  $('#keyboard').keyboard({
      // set this to ISO 639-1 language code to override language set by
      // the layout: http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
      // language defaults to ["en"] if not found
      language: ['love'],
      rtl: false,

      // *** choose layout & positioning ***
      // choose from 'qwerty', 'alpha',
      // 'international', 'dvorak', 'num' or
      // 'custom' (to use the customLayout below)
      layout: 'qwerty',
      customLayout: {
        'default': [
          'd e f a u l t',
          '{meta1} {meta2} {accept} {cancel}'
        ],
        'meta1': [
          'm y m e t a 1',
          '{meta1} {meta2} {accept} {cancel}'
        ],
        'meta2': [
          'M Y M E T A 2',
          '{meta1} {meta2} {accept} {cancel}'
        ]
      },
      // Used by jQuery UI position utility
      position: {
        // null = attach to input/textarea;
        // use $(sel) to attach elsewhere
        of: null,
        my: 'center top',
        at: 'center top',
        // used when "usePreview" is false
        at2: 'center bottom'
      },

      // allow jQuery position utility to reposition the keyboard on
      // window resize
      reposition: true,

      // true: preview added above keyboard;
      // false: original input/textarea used
      usePreview: true,

      // if true, the keyboard will always be visible
      alwaysOpen: true,

      // give the preview initial focus when the keyboard
      // becomes...