JSFiddle - React, Tailwind, and code Playground

by Vivek Athalye

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://api.jquery.com/resources/events.js"></script>
<div>
When you click on "Trigger KeyPress event" it will read the string from first textbox and try to generate keyboard events ('keydown', 'keypress', 'keyup') on second textbox for given string.
</div>
<input type="text" id="in" value="aA">
<input type="text" id="test">
<button class="triggerKP">
Trigger KeyPress event
</button>
<div id="output"></div>

JavaScript

$(function(){
  $( "#test" ).keypress(function( event ) {
    handleKBEvent('keypress', event);
  });
  $( "#test" ).keyup(function( event ) {
    handleKBEvent('keyup', event);
  });
  $( "#test" ).keydown(function( event ) {
    handleKBEvent('keydown', event);
  });
  
  $(".triggerKP").click(function() {
    // just to ensure that KB events are fired only after textbox has got focus
    $("#test").on('focus', trigKPOnFocus);
    $("#test").focus();
    $("#test").off('focus', trigKPOnFocus);
  });
})


function handleKBEvent(name, event) {
  if ( event.which == 13 ) {
     event.preventDefault();
  }
  
  var msg = "<b>Handler for ." + name + "() called </b>";
  $.print( msg );
  $.print( event.originalEvent );
}


function trigKPOnFocus() {
  log('generating text event', 'html');
  var str = $('#in').val();
  for(var i=0; i<str.length; i++) {
    generateKP(str[i], "test");
  }
}
function generateKP(ch, txt) {
  var c = ch.toUpperCase().charCodeAt(0);
  //log(ch + ":" + c);
  //log('For keydown and keyup of: ' + ch)
  var detailsKDU = {
    'view': window,
    'isTrusted': true,
    'charCode': 0,
    'keyCode': c,
    'which': c,
    'key': ch,
    'code': "Key" + ch.toUpperCase(),
    'bubbles': true,
    'cancelable': true,
    'eventPhase': 2
  };
  //log(detailsKDU);

  var c = ch.charCodeAt(0);
  //log('For keypress of: ' + ch)
  var detailsKP = {
    'view': window,
    'isTrusted': true,
    'charCode': c,
    'keyCode': 0,
    'which': c,
    'key': ch,
    'code': "Key" + ch.toUpperCase(),
    'bubbles': true,
    'cancelable': true,
    'eventPhase': 2
  };
  //log(detailsKP);

  var txtbox = document.getElementById(txt);

  var e1 = new KeyboardEvent('keydown', detailsKDU);
  var b1 = txtbox.dispatchEvent(e1);

  var e2 = new KeyboardEvent('keypress', detailsKP);
  var b2 = txtbox.dispatchEvent(e2);
  
  var e3 = new KeyboardEvent('keyup', detailsKDU);
  var b3 = txtbox.dispatchEvent(e3);
  log(b1)
  log(b2)
  log(b3)

  log(e1);
  log(e2);
 ...