Geekpedia Tutorials Home

Building a C# Chat Client and Server

Building a C# Chat Client and ServerA step by step tutorial teaching you how to create your own chat client and chat server easily in C#, for local networks or the Internet.

in C# Programming Tutorials

Getting Hard Drive Information

Getting Hard Drive InformationA C# tutorial showing you how to make use of WMI to extract information on disk drives, such as model, capacity, sectors and serial number.

in C# Programming Tutorials

UPS Shipping Calculator

UPS Shipping CalculatorThis tutorial will teach you how to calculate the shipping cost based on the weight, height, length and depth of the box, the distance and the UPS service type.

in PHP Programming Tutorials

Create Your Own Rich Text Editor

Create Your Own Rich Text EditorCreating a Rich Text Editor using JavaScript is easier to do than you might think, thanks to the support of modern browsers; this tutorial will walk you through it.

in JavaScript Programming Tutorials
Search
Tutorials
Programming Tutorials
IT Jobs
From CareerBuilder

Clipboard cut, copy and paste with JavaScript

This tutorial will show you how to copy text to the clipboard, cut to the clipboard and paste, all these from a browser window.

On Monday, July 11th 2005 at 02:59 PM
By Andrew Pociu (View Profile)
*****   (Rated 4.4 with 98 votes)
Contextual Ads
More JavaScript Resources
Advertisement
JavaScript offers you the possibility to perform the typical operations on the client's clipboard: cut, copy and paste. Before going any further, I should mention that this code doesn't work with Firefox.

Copy to the clipboard


Sometimes, when the user submits a form you may want to offer him the possibility to copy the content of a field (such as a textarea) to the clipboard so that if something goes wrong he doesn't lose what he just wrote. Another situation in which you can use this feature is when you have some cut & paste code, instead of letting the user select the text, right clicking and selecting copy or cut, he can do all this through a single click of a button.



The following sample HTML page uses JavaScript to copy the selected text. Here is the JavaScript code:





<script type="text/javascript">

function CopyToClipboard()

{

   CopiedTxt = document.selection.createRange();

   CopiedTxt.execCommand("Copy");

}

</script>



And the HTML you need to make this work is:





<form name="Form1">

Here is some text you can copy. You can copy text from anywhere on the page, simply select it and press the Copy to clipboard button. Then you can paste it anywhere you want, in Notepad, Visual Studio or in the textarea below.

<br /><br />


<textarea id="txtArea" cols="60" rows="5">You can also copy text from this textarea. Or you can paste the text here, using the Ctrl+V key combination.</textarea>

<br />

<input type="button" onClick="CopyToClipboard()" value="Copy to clipboard" />

</form>



See this code in action


Select all and copy to clipboard


Most of the time you'll want the user to select the entire text in a textarea and then copy it to the clipboard. Using JavaScript you can automatically select all the content of the textbox and copy it, to simplify the process for the users. We use the same JavaScript and HTML we used in the earlier example and simply add 2 more lines to the JavaScript function CopyToClipboard():





<script type="text/javascript">

function CopyToClipboard()

{

   document.Form1.txtArea.focus();

   document.Form1.txtArea.select();

   CopiedTxt = document.selection.createRange();

   CopiedTxt.execCommand("Copy");

}

</script>



The first line we added puts the focus on the textarea, and the second one selects all its content. After that, the text is ready to be copied in the clipboard.


Paste from clipboard


In certain cases you may want to paste the content of the clipboard. This can be accomplished as easy as copying to the clipboard was.

Here's the JavaScript you need to use for implementing both a copy button and a paste button:





<script type="text/javascript">

function CopyToClipboard()

{

   CopiedTxt = document.selection.createRange();

   CopiedTxt.execCommand("Copy");

}

function PasteFromClipboard()

{

   document.Form1.txtArea.focus();

   PastedText = document.Form1.txtArea.createTextRange();

   PastedText.execCommand("Paste");

}

</script>



And the HTML you need to make this work is:





<form name="Form1">

Select this text, copy it using the copy button, and paste it below.<br /><br />

<textarea id="txtArea" cols="60" rows="5"></textarea>

<br />

<input type="button" onClick="CopyToClipboard()" value="Copy to clipboard" />

<input type="button" onClick="PasteFromClipboard()" value="Paste from clipboard" />

</form>



Please note that when you paste this code, it is pasted in the textarea, and all the previous text is erased. To paste the text at cursor position, more code is involved.

Cut from clipboard


I'm not completely sure why you'd want to cut content from a page, but here it goes, the code needed for cutting content from a page, along with the earlier code (for copying and pasting):





<script type="text/javascript">

function CutToClipboard()

{

   CutTxt = document.selection.createRange();

   CutTxt.execCommand("Cut");

}

function CopyToClipboard()

{

   CopiedTxt = document.selection.createRange();

   CopiedTxt.execCommand("Copy");

}

function PasteFromClipboard()

{

   document.Form1.txtArea.focus();

   PastedText = document.Form1.txtArea.createTextRange();

   PastedText.execCommand("Paste");

}

</script>



And the markup:





<form name="Form1">

Select this text, copy it using the copy button, and paste it below.<br /><br />

<textarea id="txtArea" cols="60" rows="5"></textarea>

<br />

<input type="button" onClick="CutToClipboard()" value="Cut to clipboard" />

<input type="button" onClick="CopyToClipboard()" value="Copy to clipboard" />

<input type="button" onClick="PasteFromClipboard()" value="Paste from clipboard" />

</form>



Beware, anything from the document can be cut using this method, including the textarea and buttons.



See this code in action
Digg Digg It!     Del.icio.us Del.icio.us     Reddit Reddit     StumbleUpon StumbleIt     Newsvine Newsvine     Furl Furl     BlinkList BlinkList

Rate Rate this tutorial
Comment Current Comments
by kavin on Saturday, August 13th 2005 at 06:22 AM

How is change the Case(Lower,Upper) using Java script?
I need only selected word only.

by yogesh on Monday, September 5th 2005 at 06:24 AM

nice code it can realy help the users

by joe on Friday, September 9th 2005 at 06:11 AM

this only works in IE, correct?

by Andrei Pociu on Friday, September 9th 2005 at 06:24 AM

Indeed, it only works in Internet Explorer.

I'm not even sure if Firefox has a function for controling the clipboard... if I remember correctly I believe the visitor needs to make some changes to his Firefox browser so that the JavaScript can work.

by Pratheep on Wednesday, September 14th 2005 at 10:51 AM

When I open my HTML file from a network drive, none of the copy commands work. If I copy the file to my local drive and try, it works fine. Any ideas?

by gcyrillus on Tuesday, October 18th 2005 at 11:49 AM

too bad it only works for IE ...
...copy/paste is desactivated if surfing or reading page from the web , depending on your system or "security tools".Reasons seems obvious !

by Nev on Wednesday, November 30th 2005 at 12:47 PM

Hi @ll

At firefox you have to change the user.js on your pc
look at this: http://www.mozilla.org/editor/midasdemo/securityprefs.html

for IntrAnet you can use this:
http://www.dhtml-now.de/javascript_script.php?category=Sonstiges&script=Systemzwischenablage (only german)
It works only in FF on Intranet

Cu
Nev

by Thitikorn on Monday, February 6th 2006 at 03:01 AM

i want run on firefox

now i copy user.js at folder
+++++++++++++++++++++
i want javascript code



by nithya on Monday, February 6th 2006 at 06:02 AM

it does work . Very useful for developers

by nithya on Monday, February 6th 2006 at 11:53 PM

how to check whether selection is made in textarea before i copy to clipboard?

by Ben Wells on Tuesday, February 28th 2006 at 09:36 AM

It's good but I don't like the way it doesn't paste where the cursor is. Instead it just replaces all the current text with the clipboard text.

by Al on Tuesday, March 7th 2006 at 05:33 PM

checkout :
http://www.folknology.com/blog/1/1/2006/3/7/56
http://spaces.msn.com/rayozzie/blog/cns!FB3017FBB9B2E142!285.entry?_c11_blogpart_blogpart=blogview&_c=blogpart#permalink
http://scripting.wordpress.com/2006/03/07/ray-ozzies-clipboard-for-the-web/
http://scobleizer.wordpress.com/2006/03/07/clipboard-for-the-web/

live example (in Firefox also) : http://spaces.msn.com/editorial/rayozzie/demo/liveclip/liveclipsample/clipboardexample.html

by Tejal on Monday, March 13th 2006 at 04:24 AM

hi,
Actually i want textarea's whole content in one text file..
How to do that ????
Plz.. waiting..

by Andrei Pociu on Monday, March 13th 2006 at 12:17 PM

I'm sorry, but that's a totally different subject. If you're planning to save a text file to the server, you're out of luck, since JavaScript is client side and cannot do that.
You'll need to work with a server side language such as ASP.NET or PHP.

by Tejal on Tuesday, March 14th 2006 at 02:04 AM

Thanks for your reply.. i have got it as i m doing on client side. but now i want to pass key "s", so can save that text file.. as i have now one window box like when we are saving anything and save's window coming.. now i want to do dynamically so i don't have to press save button every time..
Thanks....

by Andrei Pociu on Tuesday, March 14th 2006 at 04:39 AM

Ok, so you want to save on the client side computer, but you don't want the save dialog to show up and the visitor to click Save.
That's not possible, otherwise anyone could save files to your computer when you visit a website, without you knowing.

by Tejal on Thursday, March 16th 2006 at 03:43 AM

Hi. I have one problem regarding execution of JavaScript and VBScript. As I want text file’s content in Access and that's not possible in JavaScript. And I have generated text file in JavaScript, now wanting that file content in Access and that's in VBScript. But VBScript's executing before text file is being generated. So not getting value in Access database.
What to do for this ?

by Tejal on Friday, March 17th 2006 at 04:32 AM

hi...... I want JavaScript's Arrays and other variables in ASP so can add them in database.. How to do this .. Any Way ??? I tried hidden field and Request.form("FieldName")..
But not getting..
Plz Help in this..
Thanks

by Paul on Wednesday, March 29th 2006 at 02:07 PM

Andrei,
Great tutorial and code! In the tutorial, you wrote:
...To paste the text at cursor position, more code is involved...

How can I get that additional code? I would need that to make this work for my application. Can you provide it?
Can you post it here for everyone to use, or email it to me if you think it is too long and esoteric?
Thanks!

by Andrei Pociu on Wednesday, March 29th 2006 at 02:22 PM

Hello Paul,

Thanks for the kind words.
To paste at the cursor you can use the function below.

function insertAtCursor(myField, myValue)<br />
{<br />
// IE support<br />
if (document.selection)<br />
{<br />
myField.focus();<br />
sel = document.selection.createRange();<br />
sel.text = myValue;<br />
}<br />
// MOZILLA/NETSCAPE support<br />
else if (myField.selectionStart || myField.selectionStart == &lsquo;0&prime;)<br />
{<br />
var startPos = myField.selectionStart;<br />
var endPos = myField.selectionEnd;<br />
myField.value = myField.value.substring(0, startPos)<br />
+ myValue<br />
+ myField.value.substring(endPos, myField.value.length);<br />
}<br />
else<br />
{<br />
myField.value += myValue;<br />
}<br />
}<br />
// Call the function<br />
insertAtCursor(document.formName.fieldName, &lsquo;this value&rsquo;);

<a href="http://www.alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript/" rel="nofollow">http://www.alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript/</a>

by Dave Christy on Thursday, June 29th 2006 at 09:29 PM

I have two challenges for you (Andrei et al).

1. Can you revise your code to work as a link instead of a button? I want to be able to click on a link and have the link text copied to the clipboard.

2. I do not want to use a function call, I just want to have it run right from the link, kind of like this: <A HREF=\"javascript:history.back(1)\">Back</A> I tried <A HREF=\"javascript:this.link.execCommand(\"Copy\");\">Sample</A> in hopes the word \"Sample\" would be copied to my clipboard but that did not work, it says \"syntax error\". I admit I do not know all the document. and this. options so my attempt was doomed to begin with, but perhaps one of you coders can help me figure it out. :)

by mg on Monday, July 17th 2006 at 09:41 AM

Can I get similar functionality using graphics instead of text. I have a bitmap of the screen in the clipboard, and using javascript I want to send that graphics to the printer.

by patrick on Tuesday, August 1st 2006 at 11:34 AM

In our webshop there is an function which opens a new web page.
On this page there is an ebay decription.

Is there any way to copy the HTML code of this page to the clipboard while opening it?

by Sethu on Saturday, August 19th 2006 at 06:13 AM

Hi all,

I want paste should not work in a text area...

Can Somebody help me out?

by Wilson on Wednesday, August 23rd 2006 at 07:42 AM

Can this be used to select the entire contents of a datagrid?

by syam on Wednesday, September 13th 2006 at 12:30 PM

Hi,

Can graphic content be accessed within the script too? If yes, how do we do that please?

by naeem on Wednesday, September 27th 2006 at 06:41 AM

but this code doesn't works on firefox so its is lookin useless?

by Tking on Monday, January 1st 2007 at 10:10 PM

can some1 send me a code, i need a code that will copy selected check boxes only

by programmer on Wednesday, February 14th 2007 at 03:42 AM

Iits really nice but it neither works with mozilla nor with firefox. otherwise it will be better.

by DNVC on Saturday, June 16th 2007 at 10:20 AM

Very nice codes. eg", http://dn.vc and it work with firefox.

by Enrique on Tuesday, August 14th 2007 at 02:00 PM

With a very slight modification, the Paste function may paste the text where the cursor is, so, you can make it general for all your forms.

function PasteFromClipboard()
{PastedText = document.selection.createRange();
PastedText.execCommand("Paste");}

by moz on Thursday, September 6th 2007 at 03:20 AM

Hi Guys,

i'm trying to copy to clipboard the whole FILE. Not the selected text, or the text form the file, but the file itself. Is it possible?

Help me out please.

by Mike on Tuesday, September 11th 2007 at 06:11 PM

Is there any way to copy rich text to clipboard (eg table with links)?

by Magnus on Thursday, September 20th 2007 at 12:09 PM

Mike, look at this
http://rayozzie.spaces.live.com/editorial/rayozzie/demo/liveclip/liveclipsample/clipboardexample.html
It might help you.

by beez on Thursday, September 27th 2007 at 02:50 AM

it doesnt work with firefox 2.0.0.7

try this one...
http://www.jeffothy.com/weblog/clipboard-copy/

by Fernando on Tuesday, October 16th 2007 at 06:08 PM

How do I copy the contents of a string onto the clipboard using javascript on an asp.net 2.0 page developed in Visual Studio 2005

by Andrei Pociu on Tuesday, October 16th 2007 at 06:52 PM

Just as it says in the tutorial. It makes no difference that you are running ASP.NET 2.0. If you want to copy the content of an ASP.NET string object, put it in a hidden field and use the JavaScript code to copy the content of that hidden field to the clipboard.

by Hakan Gür on Saturday, November 24th 2007 at 07:59 AM

I have tried the code(s) above. Then I came across yet another code that helps you copy, paste, replace and cut a part of a text in a text area and paste it wherever the cursor is in the text area. It works with IE but not with Opera. I have not tested it with any other browser.

For the code, go to:

http://www.able2know.org/forums/about1406-0-asc-10.html

by Sheepy on Tuesday, December 18th 2007 at 02:27 AM

An elegance cross-browser solution that uses a 106 byte swf file to copy stuff to clipboard. One way, but work in all browsers.

http://webchicanery.com/2006/11/14/clipboard-copy-javascript/

by matth on Tuesday, December 18th 2007 at 02:42 AM

Sheepy - unfortunately it requires the visitor to have the flash plugin installed.

by Rohan Mishra on Tuesday, December 18th 2007 at 05:13 AM

Hi There !

How do we make a Paste Button for Firefox ???

Thanks,

Rohan.

by Senthilkumaran M S on Friday, January 4th 2008 at 12:44 PM

This program is very nice. But this code is not working in firefox. What is the reason?

by shyam on Tuesday, January 22nd 2008 at 05:34 AM

iam not able to copy to clipboard in firefox . please help me out in this

by zain on Monday, March 3rd 2008 at 08:00 AM

hi everybody,

i would like to list all bookmarks form word document and copy and paste bookmarks form one word document to another witht thw

by will on Thursday, August 21st 2008 at 06:20 AM

Its gr8, i only hav 1 promblem - i cnt get the copy all or the paste to work

by Raja on Thursday, August 28th 2008 at 07:16 AM

I used this link
<a href="http://www.webtips.co.in/javascript/copy-to-clipboard-with-javascript-on-mozilla-firefox-and-ie.aspx">Copy to Clipboard</a>

by Rosalyn E. on Thursday, October 9th 2008 at 10:22 AM

How can you select all and copy to clipboard without the button??

by mRHm on Tuesday, November 25th 2008 at 08:29 PM

I want to perform this operation on an iframe. How it is possible

by Hiral on Sunday, January 4th 2009 at 11:24 PM

Hi,

I tries this code in IE and working but not in Mozilla.

Please provide solution for FF also

by Hiral on Sunday, January 4th 2009 at 11:24 PM

Hi,

I tries this code in IE and working but not in Mozilla.

Please provide solution for FF also

by Leo on Sunday, March 8th 2009 at 06:54 PM

This is fine in Firefox but very dangerous in IE6 which doesn't ask for user permission. So a website that you are visiting can track your clipboard data!

You can find an example in this blog:
http://blogs.loudindian.com/?p=12 (it's safe) - Try it in IE6

Firefox requires that user change the preferences.

by 66 on Wednesday, March 18th 2009 at 07:03 AM

by ali on Tuesday, April 28th 2009 at 12:19 AM

thank you very much .. it is very helpful

by Chris on Friday, June 26th 2009 at 02:40 AM

Hi there guys/gals. I am not really any good with javascript and stuff. I want to have a multiple feild form and wanted to copy the entire contents of the form. Is this possible to do?

by drain on Sunday, August 2nd 2009 at 05:11 AM

You can also use other techniques for getting at the system clipboard. Check out http://brooknovak.wordpress.com/2009/07/28/accessing-the-system-clipboard-with-javascript/

by venu on Sunday, November 29th 2009 at 11:18 PM

I have nested iframes, frames inside iframes and forms inside the frames.
Then I want to copy from a control in one form to another control in another form in a different iframe.

Any one suggest how to point from the frames(above to the document level)

by sami on Saturday, December 12th 2009 at 09:45 PM

awesome!
I was looking for this, but if it would work in Firefox!!!
whatever thanks a lot.

by kannan on Wednesday, February 24th 2010 at 06:41 AM

Dear Sir/Madam,
The code is not working.
Regards,
Kannan

by ann on Wednesday, March 3rd 2010 at 09:31 AM

hi guys: i'm not computer savvy at all and i'm taking my bsn classes online. one of my assignments is to create a trifold brochure and i think i pretty much have it down. i found a really neat picture of a heart and i'd like to paste it onto my brochure but i don't know how to do it and can't find the directions. can any of you help - in really simple terms, ok? thanks, i would really appreciate it.

by Keynman on Wednesday, March 17th 2010 at 11:29 PM

Does not work for Firefox

by Damien on Wednesday, May 19th 2010 at 03:37 AM

What code would I need so I could copy a text box, drop down menus and check boxes.

Thanks

by Zahar on Tuesday, June 1st 2010 at 05:59 AM

Hello,
is it possible to make the Paste button open a new window and paste the text in a box on this other page?

hope some one can help with

Thanks

by PETROVValerij23 on Tuesday, June 15th 2010 at 12:48 PM

недорогой <a href="http://www.galaxy-marble.com.ua">оникс камень</a> заказать тут

by tasleem zahid on Friday, June 18th 2010 at 01:23 AM

how we enable right key in gridview for copy paste cut
plz reply hurry

by MercedesWolf26 on Sunday, July 4th 2010 at 12:50 PM

Have no a lot of cash to buy a house? You not have to worry, just because it is available to take the <a href="http://lowest-rate-loans.com/topics/credit-loans">credit loans</a> to solve such kind of problems. So get a sba loan to buy everything you require.

by Sumit Gole on Tuesday, July 20th 2010 at 04:53 AM

This code is working fine for 'text' copy and paste. But when I try to copy any image then this would not work. Can you provide any solution for this issue?
I would really appreciate if you can provide any solution to this issue.

by Sumit Gole on Tuesday, July 20th 2010 at 04:54 AM

This code is working fine for 'text' copy and paste. But when I try to copy any image then this would not work. Can you provide any solution for this issue?
I would really appreciate if you can provide any solution to this issue.

by hotcakes on Friday, August 6th 2010 at 07:51 AM

soooo useful! thanks!


<script type="text/javascript">

function CopyToClipboard()

{

CopiedTxt = document.selection.createRange();

CopiedTxt.execCommand("Copy");

}

</script>


<form name="Form1">

<center><a href="http://imissyouhotcakes.blogspot.com/"><img src="http://3.bp.blogspot.com/_5RszkrqrsbQ/TFtqOv3DDjI/AAAAAAAAAX0/J695C8FPHZ0/s320/longdistanceloveaffair badge.jpg" border="0" /> </a>

<br />

<textarea id="txtArea" cols="25" rows="5"><a href="http://imissyouhotcakes.blogspot.com/"><img src="http://3.bp.blogspot.com/_5RszkrqrsbQ/TFtqOv3DDjI/AAAAAAAAAX0/J695C8FPHZ0/s320/longdistanceloveaffair badge.jpg" border="0" /> </a></textarea>

<br />

<input type="button" onclick="CopyToClipboard()" value="click to select all" /></center>

</form>
<script type="text/javascript">

function CopyToClipboard()

{

document.Form1.txtArea.focus();

document.Form1.txtArea.select();

CopiedTxt = document.selection.createRange();

CopiedTxt.execCommand("Copy");

}

</script>

by Fabiano Souza on Sunday, August 22nd 2010 at 11:11 PM

Usando o Firefox, como faço pra limpar a área de tranferência se o usuário aperte a tecla print screen ?
Por favor resnponda para fsouzaweb@hotmail.com

Atenciosamente, Fabiano Souza

by Amar Fartare on Monday, August 23rd 2010 at 05:37 AM

Thanks!!!

by Fabiano Souza on Monday, August 23rd 2010 at 07:25 AM

Usando o Firefox, como faço pra limpar a área de tranferência se o usuário aperte a tecla print screen ?
Por favor responda para fsouzaweb@hotmail.com

Atenciosamente, Fabiano Souza.

by Fabiano Souza on Monday, August 23rd 2010 at 07:25 AM

Using Firefox, how do you clear the clipboard if the user press the print screen?
Please respond to fsouzaweb@hotmail.com

Regards, Fabiano Souza.

by Ibrahim on Wednesday, September 1st 2010 at 03:36 AM

why everybody showing copy data from with in website to a clip-board? suppose user copy data from any file on machine .So data is already now in clip board. when he press (CTRL V) how can we get the data in our controls (like hidden field). so that i can process at client/server side. It is possible only with IE.. but how can we do with other browsers?


Comment Comment on this tutorial
Name: Email:
Message:
Comment Related Tutorials
There are no related tutorials.

Comment Related Source Code
There is no related source code.

Jobs JavaScript Job Search
My skills include:
Enter a City:

Select a State:


Advanced Search >>
Sponsors
Discover Geekpedia

Other Resources