Geekpedia / Programming / JavaScript / Clipboard cut, copy and paste with JavaScript

Clipboard cut, copy and paste with JavaScript

by Andrew Pociu on Jul 11 2005 - 14:59
Description:

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

Content: 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
Source: Geekpedia
URL: http://www.geekpedia.com/prog_ttrls.php?id=126