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>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-autocomplete.js"></script>
<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/docs/js/jquery-ui.min.js"></script>
<div id="wrap">
  <input class="serial keyboard-init-focus" type="text" />
  <input class="serial" type="text" />
  <input class="serial" type="text" />
  <input class="serial" type="text" />
  <input class="serial last" type="text" />
</div>

CSS

body {
  margin-top: 100px;
}

#wrap {
  display: block;
  margin: 0 auto;
  width: 250px;
  height: 40px;
}

.serial {
  width: 40px;
}

JavaScript

$(function() {

  $('.serial').keyboard({
    layout: 'num',
    alwaysOpen: true,
    initialFocus: false,
    usePreview: false,
    autoAccept: true,
    restrictInput: true,
    acceptValid: true,
    tabNavigation: true,
    appendLocally: true,
    maxLength: 3,
    position: {
      of: $('#wrap'),
      my: 'center top',
      at: 'center bottom'
    },
    visible: function(e, keyboard, el) {
      el.select();
    },
    change: function(e, keyboard, el) {
      // check valid again, because checkValid() is called
      // ~100ms after the change event =(
      keyboard.checkValid();
      if (keyboard.isValid && keyboard.$el.hasClass('last')) {
        setTimeout(function() {
          keyboard.close(true); // accept the content
        }, 100);
      } else if (keyboard.isValid) {
        // set time out needed to finish up change event and run checkCombos &
        // checkValid after a set time (see issue #102) 
        setTimeout(function() {
          if (keyboard.isValid) {
            keyboard.switchInput(true, true);
          }
        }, 100);
        return false;
      }
    },

    validate: function(keyboard, value, isClosing) {
      var valid = /^\d{3}$/g.test(value);
      keyboard.isValid = valid;
      return valid;
    }

  });

});