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/

It should work with `opacity: 0; position: absolute; z-index: -1` — ChrisG, Dec 13 '18 at 12:37
You might also want to add `pointer-events: none`. Or use `position: fixed; top: -100px` or something, to move it completely off screen. — ChrisG, Dec 13 '18 at 12:45

score 2 · Accepted Answer · answered Dec 13 '18 at 12:49

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

score 1 · Answer 2 · answered Dec 13 '18 at 12:39

1

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.

answered Dec 13 '18 at 12:39

maximelian1986

1,850
1
13
27

Solved with the solution given by @Chris G mentioned in the question's comment `opacity: 0; position: absolute; z-index: -1` – David Johns Dec 13 '18 at 12:41

score 1 · Answer 3 · edited Apr 16 '19 at 19:31

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

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

3 Answers3