JSFiddle - React, Tailwind, and code Playground

by Nimeshka Srimal

HTML

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<input id="lvl4_text1" row=5/>
<button id="del_btn">
  Delete
</button>

JavaScript

$(document).on('click',"button[id='del_btn']", function(event) {
		console.log('button delete');
    
    $("input").focus();
       fireKeyboardEvent("keyup", 64);
    
       
    /*$("input[id='lvl4_text1']").focus().trigger({ type : 'keypress', which : 13 });*/

		/*$("input[id='lvl4_text1']").select();
    $("input").focus(function() {
      console.log( "Handler for .focus() called." );
    });
    */
  
    /*
    e = $.Event('keydown');
    e.keyCode= 8; // enter
    e.which= 8; // enter
    setTimeout(function(){
    	$("input").trigger(e);
      console.log('triggered event');
    }, 5000);
    */
    
    /*
    $("input[id='lvl4_text1']").select()
    $("input[id='lvl4_text1']").focus()
    //trigger backspace keycode 8, keydown and keyup envent to input
    var e = $.Event('keydown',{keyCode:8,which:8})
    $("input[id='lvl4_text1']").trigger(e)

    $("input[id='lvl4_text1']").trigger('keypress', {which: 'A'.charCodeAt(0)});
    
    e = $.Event('keyup',{keyCode:8,which:8})
    $("input[id='lvl4_text1']").trigger(e)
    */
});  


function fireKeyboardEvent(event, keycode) {
    var keyboardEvent = document.createEventObject ?
        document.createEventObject() : document.createEvent("Events");

    if(keyboardEvent.initEvent) {
        keyboardEvent.initEvent(event, true, true);
    }

    keyboardEvent.keyCode = keycode;
    keyboardEvent.which = keycode;

    document.dispatchEvent ? document.dispatchEvent(keyboardEvent) 
                           : document.fireEvent(event, keyboardEvent);
  }
  
  
  
//I can see keyup and keydown event was triggered successfully.
$(document).on('keyup', "input[id='lvl4_text1']", function(event) {
    console.log("level 4 text keyup"+event.which)
});   
$(document).on('keydown', "input[id='lvl4_text1']", function(event) {
    console.log("level 4 text down"+event.which)
});