Hello, 
 

I am trying to build a "Copy To Clipboard" button for one of my VF pages. 

I found the code below on GitHub (will attribute author at bottom), but it displays the text to be copied in an output field.  The functionality works just as I want it to, but I don't want to display the text, I just want to store it behind the button.  Can anyone help me convert the OutPutPanel portion to a stored variable?  I've been playing around with this for a while and can't figure it out. 

Here is the code: 
 

<apex:page title="Clipboard Test" >
<apex:messages />
    <script language="JavaScript">
        function ClipBoard(copytextid, holdtextid){
            copyToClipboard(copytextid);
        }
        function copyToClipboard(elementId) {
          // Create an auxiliary hidden input
          var aux = document.createElement("input");
          // Get the text from the element passed into the input
          aux.setAttribute("value", document.getElementById(elementId).innerHTML);
          // Append the aux input to the body
          document.body.appendChild(aux);
          // Highlight the content
          aux.select();
          // Execute the copy command
          document.execCommand("copy");
          // Remove the input from the body
          document.body.removeChild(aux);
        }    
    </script>   
    <apex:pageblock >
    <apex:form >
        <apex:outputpanel ID="copytext" STYLE="height:150;width:162;background-color:pink">
            TEXT TO BE COPIED
        </apex:outputpanel> 
        <apex:inputtextarea ID="holdtext" STYLE="display:none;"></apex:inputtextarea>
        <apex:commandbutton onClick="ClipBoard('{!$Component.copytext}', '{!$Component.holdtext}');" rerender="copytext" value="Copy to Clipboard"/> 
    </apex:form>
    </apex:pageblock>
</apex:page>

**Source: https://gist.github.com/nithesh1992/dc66708bde9ab94313a731a715fef9ad#file-copy-txt

I want to accomplish something like this:
 

<apex:variable ID="copytext" value="TEXT TO BE COPIED" "/>
            
      
        <apex:inputtextarea ID="holdtext" STYLE="display:none;"></apex:inputtextarea>
        <apex:commandbutton onClick="ClipBoard('{!$Component.copytext}', '{!$Component.holdtext}');" rerender="copytext" value="Copy to Clipboard"/>

So that the only visable piece is the button.  Can anyone help me with this?!

Thank you, and happy thanksgiving!