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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<div class="row vertical-center">
  <div class="col-sm-12 text-center">
    <button id="dialogButton">Click Me</button>
  </div>
</div>

<div id="wrap" class="hidden">

  <div class="row form-group">
    <div class="col-sm-12">
      <p>Enter your information below:</p>
    </div>
  </div>

  <div class="row form-group">
    <div class="col-sm-4">
      <label for="name">Firstname</label>
    </div>
    <div class="col-sm-8">
      <input type="text" name="firstname" class="form-control">
    </div>
  </div>

  <div class="row form-group">
    <div class="col-sm-4">
      <label for="name">Lastname</label>
    </div>
    <div class="col-sm-8">
      <input type="text" name="lastname" class="form-control">
    </div>
  </div>

  <div class="row form-group">
    <div class="col-sm-4">
      <label for="name">City</label>
    </div>
    <div class="col-sm-8">
      <input type="text" name="city" class="form-control">
    </div>
  </div>


</div>

CSS

div.ui-keyboard {
  z-index: 2000;
}

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

JavaScript

/* 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
*/
$(document).on('shown.bs.modal', '.modal', function() {
  $('.modal input').keyboard({
      layout: 'qwerty',
      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'
      },
      usePreview: false
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 50
    });
}).on('hide.bs.modal', '.modal', function() {
  // remove keyboards to free up memory
  $('.modal input').each(function() {
    $(this).data('keyboard').destroy();
  });
});

$('button#dialogButton').on('click', function() {
  bootbox.dialog({
    title: 'User Registration',
    message: $('div#wrap').html(),
    buttons: {
      save: {
        label: 'Save',
        class: 'btn-success'
      },
      cancel: {
        label: 'Cancel',
        class: 'btn-default'
      }
    }
  });
});