Solved

Copy to Clipboard code.

Posted on 2013-01-21
11
1,006 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
ID: 38801567
0
 
LVL 19

Expert Comment

by:Rikin Shah
ID: 38801627
0
 
LVL 6

Expert Comment

by:Alan Gunn
ID: 38801961
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 10

Assisted Solution

by:Monica P
Monica P earned 250 total points
ID: 38805195
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
ID: 38819338
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
 
LVL 6

Expert Comment

by:Alan Gunn
ID: 38819564
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
ID: 38820198
but how can i make my version work?
0
 

Author Comment

by:APD_Toronto
ID: 38824725
any one"?
0
 
LVL 6

Accepted Solution

by:
Alan Gunn earned 250 total points
ID: 38825256
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
ID: 38825261
Oops! Works even with the extre </head> tag.

Please remove to avoid errors. :-)

TRM
0
 
LVL 10

Expert Comment

by:Monica P
ID: 38825701
Is my code was helpful?
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

813 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

18 Experts available now in Live!

Get 1:1 Help Now