Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard.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>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.4.1/css/all.css">
<div id="wrap">
  <input id="keyboard" type="text" />
</div>

CSS

.ui-widget .ui-keyboard-bat,
.ui-widget .ui-keyboard-cat,
.ui-widget .ui-keyboard-ghost {
  /* override jquery ui font setting */
  font-family: "Font Awesome 5 Pro";
}

.ui-keyboard-bat span,
.ui-keyboard-cat span,
.ui-keyboard-ghost span {
  display: none;
}

.ui-keyboard-bat:before {
  content: '\f6b5';
}

.ui-keyboard-cat:before {
  content: '\f6be';
}

.ui-keyboard-ghost:before {
  content: '\f6e2';
}

body {
  margin-top: 100px;
}

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

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
  $('#keyboard').keyboard({
    css: {
      buttonDefault: 'fas'
    },
    layout: 'custom',
    customLayout: {
      'default': [
        'bat cat ghost',
        '{accept} {cancel}'
      ]
    }
  });
});