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>
<h1>Custom Action Key</h1>

<p>The panic button has two exclamation points in the layout. This makes the plugin add the buttonAction class name</p>

<div id="wrap">
  <input class="keyboard" type="text">
</div>

CSS

h1 {
  font-size: 25px;
  text-align: center;
  margin: 10px;
}

p {
  font-size: 20px;
  margin: 10px 10px 50px 10px;
}

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

JavaScript

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

  // don't use !! in the name here
  $.keyboard.keyaction.panic = function(base) {
    alert('AHHHHHHHHHH!!!');
  };

  $('.keyboard').keyboard({

    layout: 'custom',
    // only use !! in the action key layout
    customLayout: {
      'default': [
        "{panic!!} Q W E R T Y U I O P {bksp}",
        'A S D F G H J K L ',
        "Z X C V B N M .",
        "{meta2} {space} @ {accept}"
      ],
      'meta1': [
        "{panic!!} Q W E R T Y U I O P {bksp}",
        'A S D F G H J K L ',
        "Z X C V B N M .",
        "{meta2} {space} @ {accept}"
      ],
      'meta2': [
        '{panic!!} 1 2 3 4 5 6 7 8 9 0 {bksp}',
        "= + ! ? # $ £ € % & | ~ *",
        "[ ] - _ / \\ : ' .",
        "{meta1} {space} @ {accept}"
      ]
    },
    display: {
      'panic': 'Panic!', // don't use !! here
      'meta1': 'ABC',
      'meta2': '123!#@'
    },
    css: {
      buttonAction: 'ui-state-active'
    },
    alwaysOpen: true

  });

});