0

I need Copy to Clipboard functionality in Visualforce Page, I tried several links but nothing seems to be working.

<apex:page title="Clipboard Test" >
<apex:messages />
    <script language="JavaScript">
        function ClipBoard(copytextid, holdtextid) 
        {
            holdtxt = document.getElementById(holdtextid);
            holdtxt.innerText = document.getElementById(copytextid).innerText;
            Copied = holdtxt.createTextRange();
            alert("text in buffer \"" + holdtxt.innerText + "\"");
            Copied.execCommand("Copy");
        }
    </script>   

    <apex:pageblock >
    <apex:form >
        <apex:outputpanel ID="copytext" STYLE="height:150;width:162;background-color:pink">
            Text to Copy
        </apex:outputpanel> 

                <apex:inputtextarea ID="holdtext" STYLE="display:none;">
        </apex:inputtextarea>

        <apex:commandbutton onClick="ClipBoard('{!$Component.copytext}', '{!$Component.holdtext}')" value="Copy to Clipboard"/> 
    </apex:form>
    </apex:pageblock>

</apex:page>
5
  • Please post the VFP code which you've tried.
    – SE_User
    Apr 3, 2017 at 13:30
  • 1
    Are you getting any errors?
    – Adrian Larson
    Apr 3, 2017 at 13:43
  • Not getting any error, but the code is not working
    – Jeff
    Apr 3, 2017 at 13:45
  • I have used clipboardjs.com without issues before. Apr 3, 2017 at 13:46
  • 1
    Seems like you have not included link to its JS library, See the setup link in the mentioned site. Also you should add rerender to command button otherwise whole page would reload.
    – Raul
    Apr 3, 2017 at 13:51

3 Answers 3

1

There are a couple of errors in your page. The createTextRange is specific to InternetExplorer and there is no re-render or return false; present in your <apex:commandbutton code. Or else the whole page would refresh and the clipboard data will be lost. There are many similar examples you can find in Stackoverflow/JSFiddle. I found one here. I tried using this JS function in your code as below. Hope this will help.

VF Page 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 Copy
        </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>
3

There are 2 problems with your code:

  1. Include clipboard.js to the page.

  2. Add rerender to apex:commandButton otherwise whole page would refresh.

If you want to copy the value from one element to another, that can be done with JavaScript and doesn't specifically need the clipboard.js library.

0

i had similar requirement,i am not getting the result,Can u please help me out.This is my code

<apex:page controller="one"> 

<apex:messages />
<script language="JavaScript">
        function ClipBoard(copytextid){
            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:form > 
        <apex:pageBlock id="one"> 
           <apex:pageBlockSection >
                    <apex:commandButton value="Generate" reRender="one">                     
                    <apex:param name="RURL" value="{!$Page.Pagee}" assignTo="{!accid}"/> 
                    </apex:commandButton>
               </apex:pageBlockSection>
                <apex:pageBlockSection >                
                Your Referral Link<apex:inputText id="copyText" value="{!accid}"/>                
                <apex:pageBlockSectionItem >
                <apex:commandbutton onClick="ClipBoard('{!$Component.copytext}');" rerender="one" value="Copy to Clipboard"/> 
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection> 
            </apex:pageBlock> 
    </apex:form> 
</apex:page>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .