Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Copy to Clipboard code.

Posted on 2013-01-21
11
Medium Priority
?
1,287 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 31

Expert Comment

by:Wayne Barron
ID: 38801567
0
 
LVL 20

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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Assisted Solution

by:Monica P
Monica P earned 1000 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 1000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

971 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