function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jeremy_nJeremy_n 

Copy to Clipboard Button

Has anyone successfully created a "Copy to Clipboard" button in Visualforce?

 

I've got a method that works for Internet Explorer only ( http://www.htmlgoodies.com/beyond/javascript/article.php/3458851/Click-Its-Copied.htm) , which will be acceptable at this point, although I would prefer a cross-browser solution.

 

However, I don't seem to be able to make it work in a VF page. Here's my basic attempt:

 

 

<apex:page title="Clipboard Test" showheader="false">

	<script language="JavaScript">
		function ClipBoard()
		{
			holdtext.innerText = {!$Component.copytext}.innerText;
			Copied = holdtext.createTextRange();
			Copied.execCommand("Copy");
		}


	</script>

<body >
	<apex:outputpanel ID="copytext" >
		This text will be copied onto the clipboard when you click the button below.
	</apex:outputpanel>
	
	<TEXTAREA ID="holdtext" STYLE="display:none;">
	</TEXTAREA>
	
	<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>

</body>	
	
</apex:page>

 

I am not a Javascript expert, which is making this all harder for me. Please help!

 

Thanks,

 

Jeremy

 

Best Answer chosen by Admin (Salesforce Developers) 
Jeremy_nJeremy_n

Well, I've got it working. Here is an example Visualforce page that incorporates javascript to copy specified text to the Windows clipboard.I'm posting it in case anyone else wants to do this again.

 

NOTE: This only works on Internet Explorer. it makes use of IE-only javascript extensions. To do the same thing in a standards-based browser is more complicated, and will require some other technology, like Flash.

 

Basic example:

 

 

<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>

 

 

There you go,

 

Jeremy

All Answers

Jeremy_nJeremy_n

Well, I've got it working. Here is an example Visualforce page that incorporates javascript to copy specified text to the Windows clipboard.I'm posting it in case anyone else wants to do this again.

 

NOTE: This only works on Internet Explorer. it makes use of IE-only javascript extensions. To do the same thing in a standards-based browser is more complicated, and will require some other technology, like Flash.

 

Basic example:

 

 

<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>

 

 

There you go,

 

Jeremy

This was selected as the best answer
DanielJimenezDanielJimenez
Has anyone got this working on standards based browsers? With flash? I'd like to add a button to copy a Case's email thread id to the clipboard. Daniel
pavan.elthepu1.392651269495206E12pavan.elthepu1.392651269495206E12
Hello All!

Copy is working great with following code on custom button click:
  
document.getElementById('phSearchInput').select();
var status = document.execCommand('copy');

But, it is not working for first time  with following code(working on second click):
  
{!REQUIRESCRIPT('/resource/jquery')} 

$('#phSearchInput').select();
var status = document.execCommand('copy');

Any help on why it is failing if we are using {!REQUIRESCRIPT('/resource/jquery')}  ?

Thanks in advance!
M Relova 9M Relova 9

pavan.elthepu1.392651269495206E12 - were you able to resolve the 1st click copy?

We are running into the same issue.

 
Erin Jane 8Erin Jane 8
Vanilla javascript for use in Visualforce is: 
function onClick(input, uniqueId) {
    const textInput = document.getElementById(uniqueId);
    textInput.focus();
    textInput.select();
    document.execCommand('copy');
}
See https://github.com/mserinjane/click-to-copy for Visualforce and Lightning usage examples