Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard-basic.css">
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-extender.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<iframe height="100px" width="300px" src="/Mottie/qq79qh90/show/" scrolling="auto"></iframe>

CSS

/* jQuery UI is not loaded! 
  this demo uses the "keyboard-basic.css" theme
  ( https://github.com/Mottie/Keyboard/blob/master/css/keyboard-basic.css )
  to add a basic white theme to the keyboard

  The theme includes css to position the keyboard
  at the botom of the browser window
*/

body {
  margin: 10px;
  background: #eee;
}
iframe {
  border: 0;
}

JavaScript

// make sure the iframe has completed loading
// before initializing the plugin
$("iframe").on("load", function() {
  $(this).contents().find("input").keyboard({
    usePreview: false
  });
});