Copy text to clipboard from hidden input is not working in jQuery

Question

I have the following code to copy a text to the clipboard by clicking on a Button. Text is in a Paragraph element, So I move that text to a hidden input field and then copy it to the clipboard. But this is only working if I move the text to a text field but not a hidden field. I also tried to display:none the input field, but the result is the same. (I can't set it to visibility:hidden because the space matters). How can I solve this?

$("button").on("click", function() {
  var n = $("p").text();
  n = $.trim(n);
  $(".copied").attr("value", n).select();
  document.execCommand("copy");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
This is the copied text!
</p>
<input type="hidden" class="copied"/>
<button>
COPY
</button>
<input type="text" placeholder="paste copied text here"/>

Here is the editable jsfiddle:

http://jsfiddle.net/d9a4x6vc/

Answer 1

You can try to change the type of the input to text before select then, and bring the type hidden back after like that.

$("button").on("click", function() {
  var n = $("#copyMe").text();
  $(".copied").attr("value", n);
  $(".copied").attr("type", "text").select();
  document.execCommand("copy")
  $(".copied").attr("type", "hidden")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="copyMe">
This is the copied text!
</p>
<input type="hidden" class="copied"/>
<button>
COPY
</button>
<input type="text" placeholder="paste copied text here"/>