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>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
<div id="summernote">
  <p>Hello Summernote</p>
</div>

CSS

body {
  margin-top: 100px;
}

JavaScript

/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
/* Use Bootstrap theme */

/* Note: this plugin only requires the jQuery UI position utility
   from the jQuery UI library, UNLESS you position the keyboard
   on your own; then it becomes optional/unneccessary
*/

$(function() {
  $('#summernote')
    .on('summernote.init', initKeyboard)
    .summernote();

  function initKeyboard() {
    $('.note-editable').keyboard({
        layout: 'custom',
        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}',
            '{space} {left} {right}'
          ],
          '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}',
            '{space} {left} {right}'
          ]
        },
        css: {
          // input & preview
          input: 'form-control input-sm',
          // keyboard container
          container: 'center-block dropdown-menu', // jumbotron
          // default state
          buttonDefault: 'btn btn-default',
          // hovered button
          buttonHover: 'btn-primary',
          // Action keys (e.g. Accept, Cancel, Tab, etc);
          // this replaces "actionClass" option
          buttonAction: 'active',
          // used when disabling the decimal button {dec}
          // when a decimal exists in the input area
          buttonDisabled: 'disabled'
        }
      })
      // activate the typing extension
      .addTyping({
        showTyping: true,
        delay: 50
      });
  }



});