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=".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"/>

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./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/d9a4x6vc/

• javascript
• jquery
• html
• css

• 2 It should work with opacity: 0; position: absolute; z-index: -1 – user5734311 Commented Dec 13, 2018 at 12:37
• 1 You might also want to add pointer-events: none. Or use position: fixed; top: -100px or something, to move it pletely off screen. – user5734311 Commented Dec 13, 2018 at 12:45

3 Answers 3

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./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"/>

I had exactly the same problem recently. What I did is put that input box position as absolute and moved it off screen. Also notice that even input field width does affect result. I tried to put width and height to 0, and it didn't copy after that also.

As DavidDomain explains in answer to a similar question, you need to change your input properties to take the value.

In your case, you can try this:

$("button").on("click", function() {
  var n = $("p").text();
  n = $.trim(n);
  $(".copied").css({
    position: "absolute",
    left: "-1000px",
    top: "-1000px"
  }).attr("value", n).attr("type","text").select();
  $(".copied").attr('css','').attr("type","hidden");
  document.execCommand("copy");
});

<script src="https://cdnjs.cloudflare./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"/>