jQuery copy and paste using document.execCommand("copy") and ("paste")

Question

I have one dropdown upon selection of which I want to copy the value of that dropdown and paste in an input field below without using clt+v every time

Here is the code what I tried:

$('body').append(`<div id="selectDialog" title="Select Regex Type" style="text-align:center;display:none;">
          <select id="listSelection">
            <option value ="">None</option>
            <option value ="[a-z]+">Single Digit Integers</option>
            <option value ="^[0-9]">Multi Digit Number</option>
            <option value ="/^-?[0-9]+\.?[0-9]*$/">Decimal Number</option>
          </select>

          <div style="margin:10px">
                 <button id="closeSelection" style="background- 
                                 color:#3B5E9E" >save</button>
          </div>

 </div>`);



$(function () {

            $("#selectDialog").dialog({
                autoOpen: false,
            });


            $('#changePattern').on("click", function () {
                $("#selectDialog").dialog("open");
            });


            $("#listSelection")
                .change(function () {

                    var s = $("#listSelection option:selected").val();
                    $("#changePattern").val(s);
                    $("#changePattern").attr("patternMask" , s);
                    $('#changePattern').select();
                     document.execCommand("copy");
                     $('#reg').select();

                })
                .trigger("change");

         $('#reg').select( function (){

         /*here I am trying to copy using document.texecCommand("copy");
but unable to copy*/
         });


            $('#closeSelection').on("click", function () {
                $("#selectDialog").dialog("close");
            });

    });

});

on clicking input having an id changePattern , i am opening an dropdown from which i am populating another field with id =reg

h i am saving a pattern to:

<input id="changePattern" />
<input id="reg" />

Answer 1

<input type="hidden"> or <input hidden>

.on() change of select store it's selected value to a hidden input. then register the inputs to the click event. Whenever a click happens on those inputs the value of the hidden input will be pasted to it.

Did you get an .execCommand() to work on an input? document.execCommand() are for contenteditable elements not form elements.

---

Demo

$('select').on('change', function(event) {

  $('#X').val($(this).val());

});

$('input').on('click', function(event) {

  if ($('#X').val() !== null) {

    $(this).val($('#X').val());

  }
});

<input id='X' hidden value=null>
<select>
  <option value=''></option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>
<br><br>
<input>
<input>
<input>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>