Javascript copy function do not work on input type hidden

I tryed to keep input type=hidden but it do not copy the value, I need to hide the input field and keep the copy function intact, somebody has a solution?

<button class="btn btn-primary" onclick="copy_link()">copy;<i class="fa fa-check"></i></button>
<input  id="my_link" type="text" class="form-control" value="test123 " />
<script>
  function copy_link() {
  /* Get the text field */
  var copyText = document.getElementById("my_link");

  /* Select the text field */
  copyText.select();

  /* Copy the text inside the text field */
  document.execCommand("copy");
$('#copy_alert').show();
 
}

$(document).ready(function() {
$('#copy_alert').hide();
});
  </script>

Answer

I solved by my self here is the solution:

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


<script>
  function setClipboard(value) {
    var tempInput = document.createElement("input");
    tempInput.style = "position: absolute; left: -1000px; top: -1000px";
    tempInput.value = value;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
    $('#copy_alert').show();
}
$(document).ready(function() {
$('#copy_alert').hide();
});

</script>
<button onclick="setClipboard('copytest')" class="btn btn-light">Copy</button>

Leave a Reply

Your email address will not be published. Required fields are marked *