CODEWITHSUNDEEP
javascriptjquery
Gyandeep Sharma
Gyandeep Sharma

Reputation: 2327

Jquery copy text to Clipboard when input field is hidden

I want to copy the content of input field in the clipboard

My code is 

<button class="btn btn-default btn-xs copy-link" title="Copy Link"><i class="fa fa-copy"></i></button>
<input type="text" class="link" value="Hello World">

<script>
    $(document).on('click','.copy-link', function() {
        var copyText = $(this).siblings('.link');
        copyText.select();
        document.execCommand("copy");
        alert("Copied the text: " + copyText.val());
    });
</script>

this code is working fine...

But I want input field hidden. Like 

 <button class="btn btn-default btn-xs copy-link" title="Copy Link"><i class="fa fa-copy"></i></button>
<input type="hidden" class="link" value="Hello World" />

Then the value is not coping with the same jquery...

Is there anything else that I'm missing.?

Upvotes: 0

Views: 2970

Answers (3)

Takit Isy
Takit Isy

Reputation: 10081

If you can put your link into a link attribute in your button,

I suggest you the following:

  • Remove your input from the HTML
  • Create it directly in the function

Here is a working snippet:

$(document).on('click', '.copy-link', function() {
  var link = $(this).attr('link');
  var tempInput = document.createElement("input");
  tempInput.style = "position: absolute; left: -1000px; top: -1000px";
  tempInput.value = link;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand("copy");
  console.log("Copied the text:", tempInput.value);
  document.body.removeChild(tempInput);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<button class="btn btn-default btn-xs copy-link" title="Copy Link" link="Hello World"><i class="fa fa-copy"></i></button>

Hope it helps.

Upvotes: 2

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Apply the style mentioned below and then use the same jquery code. It will work.

<input type="text" class="link hidden" value="Hello World 2" style="position: absolute; left: -1000px;">

Upvotes: 0

Mgasmi
Mgasmi

Reputation: 417

try opacity 0 ; here it work for sure ;) 

<input type="text" class="link hidden" value="Hello World 2">
.hidden {
  position:absolute; top:-50px; opacity:0;
}

https://jsfiddle.net/o2gxgz9r/47741/

Upvotes: 1

Related Questions