Solved

Copy to Clipboard code.

Posted on 2013-01-21
11
1,111 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 31

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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

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.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

724 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