Copy Button in HTML

Question

I am trying to setup a copy text button however I want the text its copying to not be displayed, so it takes less room on the page. I basically am trying to get just a Copy Text button but the text to not be displayed anywhere. How can I go about doing this.

<SPAN ID="copytext" STYLE="height:150;width:162;background-color:pink">
Copy Text
</SPAN> 
 <TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
 <BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON> 

<SCRIPT LANGUAGE="JavaScript">

 function ClipBoard() 
 {
 holdtext.innerText = copytext.innerText;
 Copied = holdtext.createTextRange();
 Copied.execCommand("Copy");
 }

 </SCRIPT>

don't use caps in web dev... don't use inline css/js as this is bad practice and leads to hard-to-maintain code, also language isn't necessary because html5 is a thing, also indent your code, industry-standard is 4 spaces or 1 tab character equiv to 4 spaces :) — treyBake, Jul 11 '17 at 16:21
Why not just store the text inside a variable in your script? — Nathan Arthur, Jul 11 '17 at 16:26
@NathanArthur Because then the data wouldn't be on the clipboard? — Scott Marcus, Jul 11 '17 at 16:45
@ScottMarcus Looks like he already has the js to copy it to the clipboard. Seems like it'd be a lot simpler to store the text in a variable, then copy it to the clipboard, instead of storying it in the HTML, if he's never going to display it in the browser. — Nathan Arthur, Jul 11 '17 at 16:46
@NathanArthur The data won't be copied if the element is `display:none`. And, you can't copy to the clipboard from a variable, it has to be an element that supports the `.select()` method. — Scott Marcus, Jul 11 '17 at 16:48
Possible duplicate of [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Adrian, Jul 11 '17 at 18:01

Scott Marcus · Answer 1 · 2017-07-11T16:51:37.843

You can't copy content from an element that is not being displayed. However, pulling the holder out of the document flow (so it doesn't alter the layout of the rest of the elements on the page) and then changing its opacity to become transparent will work because, even when opacity is 0, the element is still considered to be visible (go figure!).

You also, need to be careful because not all browsers support .execCommand() and if they don't, they will throw an error, so a try/catch is warranted.

var input = document.getElementById("data");
var temp = document.getElementById("temp");

// Add copy click event handler to the body so that anytime a copy operation occurs
// our event handler will fire
document.body.addEventListener('click', copy);

// event handler will recieve argument referencing the event itself 
function copy(e) {
  // copy data to placeholder - Don't use .innerText, use .textContent
  temp.value = data.textContent;

  // is element selectable?
  if (temp.select) {

    // select text
    temp.select();
    
    // Not all browsers implement execCommand and, if they don't,
    // an error will be thrown.
    try {
      // copy text
      document.execCommand('copy');
    } catch (err) {
      alert('please press Ctrl/Cmd+C to copy manually');   
    }

  }

}

#temp { 
   position:absolute;
   opacity:0;
}
#copytext {
  height:150;width:162;background-color:pink
}

<input type="text" id="temp">
<p id="data">data to copy<p>
<button>Copy</button>

*This solution was adapted from here.

score 0 · Answer 2 · answered Apr 11 '22 at 16:27

0

1.give class for copying text: <p class="copy">Copy Text</p> 2. css:

.copy {
  display: none
}

answered Apr 11 '22 at 16:27

Shu Kurenai

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 11 '22 at 17:32
If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/late-answers/31511656) – Ethan Apr 12 '22 at 01:18

score -1 · Accepted Answer · answered Sep 24 '17 at 15:13

Here is how I resolved my issue.

<script>
    var bccList = 'emails here';
    function SetList()
    {


    window.clipboardData.setData('text', bccList);
    }
    </script>

Then for the location where its being copied at I did onclick="javascript:SetList()

Copy Button in HTML

3 Answers3