How to copying content to Clipboard with JavaScript

Last updated on by

Numerous we­b applications require the ability to copy conte­nt easily, for a variety of purposes such as note­-taking, code snippet repositorie­s, and social media sharing tools. Copying text or data through a simple click on the­ clipboard in today’s digital landscape is an essential fe­ature.

In the pre­sent-day scenario, most modern browse­rs offer an effortless way to copy conte­nt to the clipboard utilizing JavaScript.

Before­ proceeding, it is worth noting that due to se­curity protocols, this feature may not be compatible­ with several browsers. To copy the­ selected te­xt, kindly instruct the user to press CTRL+C shortcut command.

In this tutorial, I show how you can copy the content to the clipboard with or without plugins.

How to copying content to Clipboard with JavaScript

Download

Contents

  1. JavaScript copy to clipboard
  2. jQuery – Copy to clipboard
  3. Copy content using clipboard.js
  4. Copy content using ZeroClipboard
  5. Conclusion

1. JavaScript copy to clipboard

In JavaScript, you can use document.execCommand('copy') to copy content. This copies the selected text on your document.

Example

<script type="text/javascript">

function copyText(){
     document.getElementById("txt_copy").select();
     document.execCommand('copy');
}
</script>
<textarea id="txt_copy"></textarea>
<textarea id="txt_paste"></textarea><br/>
<input type="button" value="copy" id="copy" onclick="copyText();" >

View Demo

Browser Support

According to the article in Mozilla Developer Network (MDN) on Document.execCommand().

  • Chrome  43+
  • Firefox   41+
  • IE  9+
  • Opera  29+
  • Safari  10+

2. jQuery – Copy to clipboard

This library does not use Flash to copy content but requires jQuery plugin.

Steps –

  • Download plugin from GitHub and include jquery.copy-to-clipboard.js file.
<script src='jquery.copy-to-clipboard.js' type='text/javascript'></script>

or you can use –

<script type="text/javascript" src="https://milankyncl.github.io/jquery-copy-to-clipboard/jquery.copy-to-clipboard.js"></script>

Example 1 – data-clipboard-text Attribute

Add the data-clipboard-text attribute to an element that contains copying Text and initialize CopyToClipboard.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://milankyncl.github.io/jquery-copy-to-clipboard/jquery.copy-to-clipboard.js"></script>
 
<button id="my-button" data-clipboard-text="Copy text" >Copy to Clipboard</button>
<br/><br/>
<textarea placeholder='Paste here'></textarea>

<script language="JavaScript">
$(document).ready(function() {
     $('#my-button').CopyToClipboard();
}); 
</script>

View Demo

Example 2 – Copy input Text and add Event Handlers

I created two <textarea> elements and a button. The button has a new attribute data-clipboard-target which has id of copying element e.g – #txt_copy.

Entered content will be copied when button gets clicked.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://milankyncl.github.io/jquery-copy-to-clipboard/jquery.copy-to-clipboard.js"></script>

<textarea id='txt_copy' placeholder='Enter your Text'></textarea>
<textarea id='txt_paste' placeholder='Paste Text Here'></textarea>
<br/><br/>

<!-- define target element id in data-clipboard-target -->
<input type='button' data-clipboard-target="#txt_copy" id='but_copy' value='copy'>

View Demo

3. Copy content using clipboard.js

This library does not use Flash to copy content and it doesn’t depend on any framework or libraries.

Steps to adding –

  • First, download clipboard.js library and include clipboard.min.js in your page.
<script src="clipboard/dist/clipboard.min.js"></script>

Or you can either use CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.13/clipboard.min.js"></script>
  • Now initialize Clipboard by specifying selector to the Clipboard Object.
new Clipboard('#but_copy');
  •  Add data-clipboard-target attribute to the element which targets from where the text is being copied.
 <textarea id="txt_copy" class='copy'></textarea>
 <input type="button" value="copy" id="copy" data-clipboard-target="#txt_copy" >

Or you can use data-clipboard-text attribute which contains copying text.

<input type="button" value="copy" id="copy" data-clipboard-text="This text is being copied." >
  • That’s all.

Example 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.13/clipboard.min.js"></script>
<script type='text/javascript'>
    var clipboard = new Clipboard('.btn');
</script>

<textarea id="txt_copy" placeholder="Enter your Text"></textarea>
<textarea id="txt_paste" placeholder="Paste here"></textarea><br/>
<input type="button" value="copy" id="copy" data-clipboard-target="#txt_copy" >

Example 2 – Adding Event Handler

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.13/clipboard.min.js"></script>
<script type='text/javascript'>
var clipboard = new Clipboard('.btn');
 
// Event Handler
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});
</script>

<textarea id="txt_copy" placeholder="Enter your Text"></textarea>
<textarea id="txt_paste" placeholder="Paste here"></textarea><br/>
<input type="button" value="copy" id="copy" data-clipboard-target="#txt_copy" >

View Demo

Browser Support

  • Chrome 42+
  • Edge 12+
  • Firefox 41+
  • IE 9+
  • Opera 29+
  • Safari 10+

4. Copy content using ZeroClipboard

It uses an invisible Adobe Flash movie to copy text which is floating above the DOM element.

Steps to adding –

  • Download ZeroClipboard library from GitHub and include ZeroClipboard.js file.
<script src='dist/ZeroClipboard.js' type='text/javascript'></script>

or you can use CDN.

<script src='https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.js' type='text/javascript'></script>
  • Set ZeroClipboard.swf path.
ZeroClipboard.config( { swfPath: "dist/ZeroClipboard.swf" } );
  • All things are setup now copy text.

Example 1 – data-clipboard-text Attribute

Add the data-clipboard-text attribute to an element that contains copying Text and initialize ZeroClipboard object.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="zeroclipboard/dist/ZeroClipboard.js"></script>
 
<button id="my-button" data-clipboard-text="Copy text" >Copy to Clipboard</button>
<br/><br/>
<textarea placeholder='Paste here'></textarea>

<script language="JavaScript">

ZeroClipboard.config( { swfPath: "zeroclipboard/dist/ZeroClipboard.swf" } );

// Initialize ZeroClipboard Object
var client = new ZeroClipboard( $("button#my-button") );
 
</script>

View Demo

Example 2 – Copy input Text and add Event Handlers

I created two <textarea> elements and a button. The button has a new attribute data-clipboard-target which has id of copying element.

Clipboard Event Handler allows us to track the process.

Your content will be copied when the user clicks the button.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="zeroclipboard/dist/ZeroClipboard.js"></script>

<textarea id='txt_copy' placeholder='Enter your Text'></textarea>
<textarea id='txt_paste' placeholder='Paste Text Here'></textarea>
<br/><br/>

<!-- define target element id in data-clipboard-target -->
<input type='button' data-clipboard-target="txt_copy" id='but_copy' value='copy'>

<script type="text/javascript">
ZeroClipboard.config( { swfPath: "zeroclipboard/dist/ZeroClipboard.swf" } );

// Initialize ZeroClipboard
var client = new ZeroClipboard( $('#but_copy') );
 
// Event Handler
client.on( 'ready', function(event) {

   client.on( 'copy', function(event) {
       event.clipboardData.setData('text/plain', event.target.innerHTML);
   });

   client.on( 'aftercopy', function(event) {
       console.log('Copied text to clipboard: ' + event.data['text/plain']);
   });
});

client.on( 'error', function(event) {
   // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
   ZeroClipboard.destroy();
});
 
</script>

View Demo

5. Conclusion

JavaScript has made it simple­r to copy content to the clipboard. Howeve­r, it’s noteworthy that browsers’ limitations have re­ndered automatic copying impossible without use­r interference­. Therefore, initiating a copy action re­quires active involveme­nt from the user.

Most modern browse­rs now allow copying of content to the clipboard using JavaScript, ensuring consiste­nt user experie­nce across different platforms without compatibility issue­s.

For those se­eking more options and increase­d oversight during the copying process, se­veral libraries are available­ to provide additional functionality.

To ensure­ everything runs smoothly, one should always re­member to test the­ implementation across differe­nt browsers.

If you found this tutorial helpful then don't forget to share.

© 2016-2024 Makitweb, All rights reserved