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.
Contents
- Copy content using JavaScript
- jQuery – Copy to clipboard
- Copy content using clipboard.js
- Copy content using ZeroClipboard
- Conclusion
1. Copy content using 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();" >
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>
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'>
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" >
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>
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>
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.