Solved

Copy to Clipboard code.

Posted on 2013-01-21
11
955 Views
Last Modified: 2013-01-28
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
Comment
Question by:APD_Toronto
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 30

Expert Comment

by:Wayne Barron
Comment Utility
0
 
LVL 19

Expert Comment

by:Rikin Shah
Comment Utility
0
 
LVL 6

Expert Comment

by:Alan Gunn
Comment Utility
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
 
LVL 10

Assisted Solution

by:Monica P
Monica P earned 250 total points
Comment Utility
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
 

Author Comment

by:APD_Toronto
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 6

Expert Comment

by:Alan Gunn
Comment Utility
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
 

Author Comment

by:APD_Toronto
Comment Utility
but how can i make my version work?
0
 

Author Comment

by:APD_Toronto
Comment Utility
any one"?
0
 
LVL 6

Accepted Solution

by:
Alan Gunn earned 250 total points
Comment Utility
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
 
LVL 6

Expert Comment

by:Alan Gunn
Comment Utility
Oops! Works even with the extre </head> tag.

Please remove to avoid errors. :-)

TRM
0
 
LVL 10

Expert Comment

by:Monica P
Comment Utility
Is my code was helpful?
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now