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>
<div id="wrap">
  <p>Click on the keyboard icon, then type "o"</p>
  <br />
  <input id="keyboard" type="text" value="change words dynamically" />
  <img id="icon" src="https://mottie.github.io/Keyboard/docs/css/images/keyboard.png" />
</div>






<script>
/* Code to get jQuery UI to work with jQuery 3.4+ ... */
$.isArray = function(a) {
  return Object.prototype.toString.call(a) === '[object Array]';
}
$.isFunction = function(f) {
  return typeof f === 'function';
}
$.isWindow = function(w) {
  var toString = Object.prototype.toString.call(w);
  return toString == '[object global]' ||
    toString == '[object Window]' ||
    toString == '[object DOMWindow]';
}
</script>
<script src="https://mottie.github.io/Keyboard/docs/js/jquery-ui-custom.min.js"></script>

CSS

body {
  margin-top: 100px;
}

#wrap {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 500px;
}

JavaScript

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

  // text that is typed when when pressing the
  // keyboard icon (actual code using .typeIn()
  // is at the bottom of this code block
  var simulateTyping = "{r}{r}{r}{r}{r}{r}{r} tw";
  var wordsToChange = 'two words';
  var newWord = 'oneNEWword';

  $('#keyboard').keyboard({
      change: function(event, kb) {
        var $el = kb.$preview;
        var text = $el.val();
        if (text.includes(wordsToChange)) {
          var newText = text.replace(wordsToChange, newWord);
	        $el.val(newText);
          // move caret to end of new word
	        $.keyboard.caret($el, newText.indexOf(newWord) + newWord.length);
        }
      }
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });

  // Typing Extension
  $('#icon').click(function() {
    var kb = $('#keyboard').getkeyboard();
    // typeIn( text, delay, callback );
    kb.reveal().typeIn(simulateTyping, 100, function() {
      // do something after text is added
      kb.$el.change();
    });
  });

});