JSFiddle - React, Tailwind, and code Playground

by Christopher Brown

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"></td>
    <input type="text" name="box2" id="box2" onKeyUp="script2()" placeholder="Box 2"></td>
</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);
    box1.dispatchEvent(e);
  }

  function add() {
    var sim1 = document.getElementById("sim1").value;
    document.getElementById("box1").value = sim1;
    box1.onkeyup();
  }

</script>