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.
In this tutorial, I show how you can copy the content to the clipboard with or without plugins.
Contents
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();" >
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. 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. 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
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 libraries.
If you found this tutorial helpful then don't forget to share.