JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input id='testinput' type='text' name='test' value='' />
</form>

CSS

/*
 * KEYBOARD
 */

div.keyboard {
	position: fixed;
	bottom: 15px;
	left: 50%;
	margin-left: -490px;
	width: 979px;
	border-radius: 10px;
	padding-left: 4px;
	font-family: Tahoma;
	padding-top: 5px;
	background: #E6E6E6;
}

div.keyboardNumeric {
	position: fixed;
	bottom: 15px;
	left: 50%;
	margin-left: -190px;
	width: 348px;
	border-radius: 10px;
	padding-left: 4px;
	font-family: Tahoma;
	padding-top: 5px;
	background: #E6E6E6;
}

.key {
	-webkit-transition: background 300ms ease;
	-moz-transition: background 300ms ease;
    -ms-transition: background 300ms ease;
    -o-transition: background 300ms ease;
	transition: background 300ms ease;
}

.key.active {
	text-decoration: none;
}

.key, .dummy {
	float: left;
	display: block;
	height: 50px;
	text-align: center;
	line-height: 50px;
	background: #ffffff;
	color: #525252;
	text-decoration: none;
	margin-right: 4px;
	margin-bottom: 5px;
	padding: 0;
	border-radius: 3px;
	font-size: 20px;
}

.dummy {
	background: #ffffff;
}

.grey {
	background-color:#000;
}

.keyNumeric, .dummy{
	float: left;
	display: block;
	height: 75px;
	text-align: center;
	line-height: 80px;
	background: #ffffff;
	color: #525252;
	text-decoration: none;
	margin-right: 4px;
	margin-bottom: 5px;
	padding: 0;
	border-radius: 3px;
	font-size: 20px;
	width:82px;
}


.dummyNumeric {
	background: #ffffff;
}

.key.last, .dummy.dummy15.last {
	margin-right: 0px;
	height:50px;
}

.key:visited { color: #525252; }

.keyboard {
	outline: 0;
}

/** widths **/
.letter, .dummy {
	width: 61px;
}

.letterNumeric, .dummy {
	width: 82px;
}

.grey, .dummy {
	width:82px;
	background-color:#E6E6E6;
}

.cross, .dummy{
	background-color:#3c8dbc;
}

.dummy.dummy15 {
	width: 93px;
	height:50px;
	background-color:#fff;
}

.key.backspace, .key.caps, .key.enter {
	width: 126px;
}

.letter.spacebar {
	width: 872px;
	text-indent: -999em;
}

.key.close {
	width: 93px;
	background-color:#fff;
}

.key.cross {
	width: 82px;
	background-color:#3c8dbc;
}

.letter.uppercase...

JavaScript

$(function(){
$('input').focus(function(){
    $('input').keyboard().show();
});

$('#testinput').on('input', function() {
   alert('change'); 
});
})
!function( $ ){

  "use strict"

 /* KEYBOARD CLASS DEFINITION
  * ==================== */

  var Keyboard = function ( element, options ) {
    this.$element = $(element)
    this.options = options
    if (this.options.display) {
      this.$keyboard = $('<div class="keyboard"><input type="text" class="input-keyboard"></div>').appendTo('body') 
    } else {
      this.$keyboard = $('<div class="keyboard"></div>').appendTo('body') 
    }
    
    this.$biginput = this.$keyboard.find('.input-keyboard')
    this.wait_timer = null
    this.init()
    this.listen()
  }

  Keyboard.prototype = {

    constructor: Keyboard

  , init: function (element) {
      //var letters = ['q','w','e','r','t','y','u','i','o','p','backspace','7','8','9','(','a','s','d','f','g','h','j','k','l',')','4','5','6',',','.','z','x','c','v','b','n','m',',','.','1','2','3','dummy','dummy','dummy','dummy','spacebar','enter','dummy','0','.']
      var letters = ['.','1','2','3','4','5','6','7','8','9','0','-','+','backspace last','dummy15','q','w','e','r','t','y','u','i','o','p','[',']','dummy15 last','caps','a','s','d','f','g','h','j','k','l',':','"','enter last','shift','z','x','c','v','b','n','m',',','.','/','shift last','space','close last']

      if (this.options.okeButton) {
        letters.push('oke')
      }

      var len = letters.length, new_row = false

      for(var i = 0; i<len; ++i) {
        var $el
        if(i in letters) {
          if(letters[i].substr(-4) == 'last') {
            letters[i] = letters[i].replace(letters[i].substr(-5), '')
            new_row = true
          }

          if(letters[i] == 'dummy') {
            $el = $('<div class="dummy"></div>')
          }else if(letters[i] == 'dummy15') {
            $el = $('<div class="dummy dummy15"></div>')
          }else if(letters[i] == 'space') {
            $el =...