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://rawgit.com/Mottie/Keyboard/master/js/jquery.keyboard.extension-extender.js"></script>
<div id="wrap">
    <input id="keyboard" type="text" />
</div>

CSS

/* https://github.com/Mottie/Keyboard
 * Extender extension demo
   Documentation for this extension can be found at
   https://github.com/Mottie/Keyboard/wiki/Setup#extender
 
 * Click the button with the keyboard icon to toggle the extender layout
*/

 /* this definition in keyboard.css includes the white icon for 
    ui-darkness theme, so we need to use a dark icon here */
 button.ui-keyboard-button.ui-keyboard-extender span {
    background-image: url(https://mottie.github.io/Keyboard/docs/css/images/keyboard.png);
    position:relative;
    top:4px;
 }

body {
    font-size: 10px;
    margin-top: 200px;
}
#wrap {
    display: block;
    margin: 0 auto;
    width: 200px;
}

JavaScript

$(function() {

  var $keyboard = $('#keyboard'),
    // extender layout
  	hexActive = false;

  $.keyboard.layouts.numpad = {
    'normal': [
      '{clear} / * -',
      '7 8 9 +',
      '4 5 6 %',
      '1 2 3 =',
      '0 {dec} {left} {right}'
    ]
  };

  $.keyboard.layouts.hexpad = {
    'normal': [
      'C D E F',
      '8 9 A B',
      '4 5 6 7',
      '0 1 2 3',
      'x {clear} {left} {right}'
    ]
  };

  // switch extender layout
  $.keyboard.keyaction.hex = function(kb) {
    hexActive = !hexActive;
    // update state of hex button
    $('.ui-keyboard-hex').toggleClass(kb.options.css.buttonActive, hexActive);
    // change extender layout
    $keyboard.addExtender({
      layout: hexActive ? 'hexpad' : 'numpad'
    });
  };

  $keyboard.keyboard({
    layout: 'custom',
    display: {
    	hex: "&#x1f435;:Hexpad",
      clear: "&#x1f5d1;:Clear",
      extender: " :Toggle Pad"
    },
    customLayout: {
      '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} {extender} {hex}'
      ],
      '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} {extender} {hex}'
      ]
    }
  }).addExtender({
    // choose any layout
    layout: 'numpad',
    // start with extender showing?
    showing: true,
    // reposition keyboard after toggling extender layout
    reposition: true
  });
});