+ Start a Discussion
John NeffJohn Neff 

Bootstrap help: Visualforce Copy to CLIPBOARD

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!
Best Answer chosen by John Neff
piyush_sonipiyush_soni
hi john try this one, :
 <apex:outputpanel ID="copytext" STYLE="height:150;width:162;background-color:pink;display:none">
            TEXT TO BE COPIED
 </apex:outputpanel>

i hope it helps you.
  Let me inform if it helps you and kindly mark it best answer if it helps you so it make proper solution for others
    thanks
http://sfdcmonkey.com

All Answers

piyush_sonipiyush_soni
hi john try this one, :
 <apex:outputpanel ID="copytext" STYLE="height:150;width:162;background-color:pink;display:none">
            TEXT TO BE COPIED
 </apex:outputpanel>

i hope it helps you.
  Let me inform if it helps you and kindly mark it best answer if it helps you so it make proper solution for others
    thanks
http://sfdcmonkey.com
This was selected as the best answer
John NeffJohn Neff
That worked perfectly thank you so much!  I tried a hundered differen't things, I can't believe I didn't think of that.  Perfect!!