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>
<div id="wrap">
  <input id="keyboard" type="text">
</div>

CSS

body {
  font-size: 10px;
  margin-top: 200px;
}

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

JavaScript

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

  $('#keyboard').keyboard({
    layout: 'custom',
    autoAccept: 'true',
    customLayout: {
      'default': [
        'AL AK AZ AR CA CO CT DE FL GA',
        'HI ID IL IN IA KS KY LA ME MD',
        'MA MI MN MS MO MT NE NV NH NJ',
        'NM NY NC ND OH OK OR PA RI SC',
        'SD TN TX UT VT VA WA WV WI WY',
        '{accept}{clear}'
      ]
    },
    usePreview: false,
    visible: function(e, keyboard, el) {
      // clear the input when the keyboard is visible
      keyboard.$el.val('');
      $("button")
        // don't stack the binds each time the keyboard becomes visible
        .unbind('click.states')
        .bind('click.states', function() {
          keyboard.accept(); // 
        });
    }
  });


});