How to copying content to the Clipboard with JavaScript

Nowadays all modern browsers allow copying content to the clipboard with JavaScript.

But before this, it is not supported in most browsers because of security reasons. You need to ask the user to press CTRL+C to copy the currently selected text.

The ZeroClipboard library uses invisible Adobe Flash movie for copying content to Clipboard. It works well with most browsers.

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

---

Contents

1. JavaScript
2. ZeroClipboard
3. clipboard.js
4. Conclusion

---

1. JavaScript

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();" >

Output

Enter your Text in the first Textarea and click the button to copy.

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. 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>

Output

Click on the button and paste in the Textbox.

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>

Output

Enter your text in the first Textarea and click the button to copy.

---

3. 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" >

Output

Enter your text in the first Textarea and click the button to copy.

Browser Support

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

---

4. Conclusion

Copying to the clipboard is now been easier with JavaScript but you don’t copy the content to Clipboard automatically. User interaction is required.

Mainly most browser supports it and if you want more functionality and control while copy then you can use JavaScript libraries.

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