Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1348
  • Last Modified:

Copy to Clipboard code.

Hello Experts,

I think this is more of a Javascript question...

I would like to have a HTML readonly textbox and a button. Is it possible for me to attach a function to the button to copy the textbox content to the user's clipboard, so they can paste it in an email or whatever?

Thank you,
0
APD Toronto
Asked:
APD Toronto
  • 4
  • 3
  • 2
  • +2
2 Solutions
 
Wayne BarronCommented:
0
 
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
0
 
Alan GunnCommented:
Hi!
Here's a sample HTA that uses VBScript but is just accessing DCOM objects so should be translatable to Javascript. :-)

<html>
<head>
<title>Clipboard</title>
<HTA:APPLICATION
  APPLICATIONNAME="Clipboard"
  ID="Clipboard"
  VERSION="1.0"/>
</head>

<script language="VBScript">

Sub OnClickButtonCopy()
    strCopy = BasicTextArea.Value
    document.parentwindow.clipboardData.SetData "text", strCopy
End Sub

Sub OnClickButtonPaste()
  BasicTextArea.InnerHTML = document.parentwindow.clipboardData.GetData("text")
End Sub
</script>

<body bgcolor="white">

<!--Add your controls here-->

<textarea name="BasicTextArea" id="BasicTextArea" rows="5" cols="40"></textarea>
<BR><BR>
<input type="button" name="Copy" id="Copy" value="Copy Text to the Clipboard" onclick="OnClickButtonCopy">
<BR><BR>
<input type="button" name="Paste" id="Paste" value="Paste Text from the Clipboard" onclick="OnClickButtonPaste">
<!--{{InsertControlsHere}}-Do not remove this line-->
</body>
</html>

Open in new window


TRM
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Monica PSoftware DeveloperCommented:
The Text To Be Copied

<SPAN ID="copytext" STYLE="height:150;width:162;background-color:pink">
This text will be copied onto the clipboard when you click the button below. Try it!
</SPAN>
<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
<input type="BUTTON" onClick="ClipBoard();">Copy to Clipboard</BUTTON>

Open in new window




Make text area control readonly using

$('input[type="text"], textarea').each(function(){
  $(this).attr('readonly','readonly');
});

Open in new window



The JavaScript

<SCRIPT LANGUAGE="JavaScript">

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

</SCRIPT>

Open in new window


You can dynamically set the textarea text in your code.for example i have set SPAN content
0
 
APD TorontoAuthor Commented:
Hi,

Bassed on AkilaPalanimuthu's code, i want to do the following, but it's not working:

<html>
<body>

<input type="text" id="txt" value="abcdef...xyz">

<input type="BUTTON" onClick="ClipBoard();" value="Copy to Clipboard" >

</body>

<SCRIPT LANGUAGE="JavaScript">

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

</SCRIPT>


</html>

Open in new window

0
 
Alan GunnCommented:
Hi!

You have a stray ";" in line 6 onclick which you should remove. :-)


AkilaPalanimuthu is using an "Invisible" (ie STYLE="display:none;") text area as a useful object for storing the text to be copied.

If you add
 
<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>

Open in new window


Anywhere in the body the code should work.


Cheers!

TRM
0
 
APD TorontoAuthor Commented:
but how can i make my version work?
0
 
APD TorontoAuthor Commented:
any one"?
0
 
Alan GunnCommented:
Hi!

This works for me. :-)


<html>
</head>


<SCRIPT LANGUAGE="JavaScript">

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

</SCRIPT>

<body>

<input type="text" id="txt" value="abcdef...xyz">

<input type="BUTTON" onClick="ClipBoard()" value="Copy to Clipboard" >

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

</body>




</html> 

Open in new window

0
 
Alan GunnCommented:
Oops! Works even with the extre </head> tag.

Please remove to avoid errors. :-)

TRM
0
 
Monica PSoftware DeveloperCommented:
Is my code was helpful?
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 4
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now