JSFiddle - React, Tailwind, and code Playground

by JANTONUCCI

HTML

<div>
    <p>If you type something into Box 1, onKeyUp it will be copied to Box2.</p>
    <input type="text" name="box1" id="box1" onKeyUp="script1()" placeholder="Box 1">
    <input type="text" name="box2" id="box2" onKeyUp="script2()" placeholder="Box 2">
</div>




<br><br>
    
    
    
<!-- SIMULATOR -->    
<div>
    <p>If you Type something into this box and...<br>
        press [Send] it will be sent to Box 1<br>
         press [New Script] we should see both the value sent AND trigger onKeyUp.</p>    
    <input type="text" name="sim1" value="" id="sim1" placeholder="Input Simulator">
    <button type="button" onclick="SimScript()" id="button1">Send</button>
    <button type="button" onclick="add()" id="button1">New Script</button>
    
    <p>Because it's not working, we still have to focus Box 1 and then press a key.</p>
</div>

<script type='text/javascript'>
    function SimScript() {
      var sim1=document.getElementById("sim1").value;
      document.getElementById("box1").value = sim1;
      return false;
    }                   
</script>

<script type='text/javascript'>
    function script1() {
      var box1=document.getElementById("box1").value;
      document.getElementById("box2").value = box1;
      return false;
    }                   
</script>

<script type='text/javascript'>
	var elem = document.getElementById("sim1");

  function triggerKeyUpEvent()
  {
    var e = document.createEvent('HTMLEvents');
    e.initEvent("keyup",false,true);
    elem.dispatchEvent(e);
  }

  function add()
  {
    var sim1=document.getElementById("sim1").value;
    document.getElementById("box1").value = sim1;
    elem.onkeyup();
    triggerKeyUpEvent();
  }                    
</script>