Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

HTML

<link rel="stylesheet" href="http://mottie.github.com/Keyboard/css/keyboard.css">
<script src="http://mottie.github.com/Keyboard/js/jquery.keyboard.js"></script>
<script src="http://mottie.github.com/Keyboard/js/jquery.mousewheel.js"></script>
<script src="http://mottie.github.com/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script src="http://mottie.github.com/Keyboard/js/jquery.keyboard.extension-autocomplete.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<input type="button" id="addButton" name="Add" value="Add" />

<div id="testDiv">
  <input type="text" id="test" />
</div>

CSS

#testDiv {
  width: 250px;
  display: flex;
  flex-direction: column;
}

input {
  margin: 4px 10px;
}

JavaScript

var kbOptions = {
  visible: function(e, kb, el) {
  	e.stopImmediatePropagation();
    e.preventDefault();
    $(el).blur();
  },
  // lockInput: true,
  usePreview: false,
};

$('#addButton').click(function() {
  $('<input>')
    .appendTo('#testDiv')
    .keyboard(kbOptions);
});

$(function() {
  $('#test').keyboard(kbOptions);
});