clipboard.js
:scissors: Modern copy to clipboard. No Flash. Just 3kb gzipped :clipboard:
Top Related Projects
The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
An HTML5 saveAs() FileSaver implementation
Access the system clipboard (copy/paste)
Quick Overview
Clipboard.js is a modern, lightweight JavaScript library for copying text to the clipboard without using Flash or any other dependencies. It provides a simple and cross-browser compatible solution for implementing copy-to-clipboard functionality in web applications.
Pros
- Lightweight and dependency-free
- Cross-browser compatibility, including mobile devices
- Easy to use with a simple API
- Supports copying from input fields, textareas, and arbitrary text
Cons
- Limited to text copying (no support for rich content or images)
- Requires user interaction due to browser security restrictions
- May not work in some older browsers or specific environments
- Doesn't provide built-in UI elements (buttons, tooltips, etc.)
Code Examples
- Basic usage:
new ClipboardJS('.btn');
This code initializes Clipboard.js on all elements with the 'btn' class.
- Copying text from an attribute:
new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});
This example copies text from the 'aria-label' attribute of the clicked element.
- Handling success and error events:
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log('Text copied!');
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action failed');
});
This code adds event listeners for successful and failed copy attempts.
Getting Started
- Include the Clipboard.js library in your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
- Add a button with a
data-clipboard-target
attribute:
<button class="btn" data-clipboard-target="#foo">Copy</button>
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
- Initialize Clipboard.js in your JavaScript:
new ClipboardJS('.btn');
That's it! Clicking the button will now copy the input's value to the clipboard.
Competitor Comparisons
The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
Pros of ZeroClipboard
- Uses Flash, which can be more reliable for older browsers
- Provides a consistent experience across different browsers
- Offers more advanced features like rich formatting support
Cons of ZeroClipboard
- Requires Flash, which is being phased out and not supported on many modern devices
- Larger file size and more complex implementation
- Less maintained and updated compared to Clipboard.js
Code Comparison
ZeroClipboard:
var client = new ZeroClipboard(document.getElementById("copy-button"));
client.on("ready", function(readyEvent) {
client.on("aftercopy", function(event) {
alert("Copied text to clipboard: " + event.data["text/plain"]);
});
});
Clipboard.js:
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e.text);
e.clearSelection();
});
Summary
ZeroClipboard relies on Flash technology, offering better compatibility with older browsers and more advanced features. However, it's less maintained and requires Flash, which is becoming obsolete. Clipboard.js, on the other hand, is a modern, lightweight solution that doesn't require Flash and is actively maintained. It's simpler to implement but may have limited support for older browsers. The choice between the two depends on your specific requirements and target audience.
An HTML5 saveAs() FileSaver implementation
Pros of FileSaver.js
- Specialized for saving files, offering more file-related features
- Supports a wider range of file types and formats
- Smaller file size, potentially leading to faster load times
Cons of FileSaver.js
- Limited to file saving functionality, less versatile than Clipboard.js
- May require additional setup for handling different file types
- Less actively maintained, with fewer recent updates
Code Comparison
FileSaver.js:
import { saveAs } from 'file-saver';
const blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");
Clipboard.js:
import ClipboardJS from 'clipboard';
new ClipboardJS('.btn');
Summary
FileSaver.js is focused on file saving functionality, offering more options for handling various file types. It's lightweight but less versatile than Clipboard.js. On the other hand, Clipboard.js provides a broader range of clipboard-related features, including copying and cutting text. The choice between the two depends on the specific needs of your project: file saving capabilities (FileSaver.js) or general clipboard operations (Clipboard.js).
Access the system clipboard (copy/paste)
Pros of clipboardy
- Cross-platform support for Node.js environments
- Simpler API for basic clipboard operations
- Supports both synchronous and asynchronous methods
Cons of clipboardy
- Limited to Node.js environments, not suitable for browser-based applications
- Fewer advanced features compared to clipboard.js
- Requires native dependencies, which may cause installation issues on some systems
Code Comparison
clipboardy:
const clipboardy = require('clipboardy');
// Write to clipboard
clipboardy.writeSync('Hello, World!');
// Read from clipboard
const text = clipboardy.readSync();
console.log(text);
clipboard.js:
import ClipboardJS from 'clipboard';
// Initialize clipboard.js
const clipboard = new ClipboardJS('.btn');
// Success callback
clipboard.on('success', (e) => {
console.log('Copied:', e.text);
});
Summary
clipboardy is a Node.js-focused clipboard manipulation library, offering a straightforward API for basic clipboard operations across different platforms. It's ideal for server-side or command-line applications. On the other hand, clipboard.js is designed for browser environments, providing a more feature-rich solution for web applications with support for various copy triggers and callbacks. The choice between the two depends on the specific use case and environment of your project.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
clipboard.js
Modern copy to clipboard. No Flash. Just 3kb gzipped.
Why
Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.
That's why clipboard.js exists.
Install
You can get it on npm.
npm install clipboard --save
Or if you're not into package management, just download a ZIP file.
Setup
First, include the script located on the dist
folder or load it from a third-party CDN provider.
<script src="dist/clipboard.min.js"></script>
Now, you need to instantiate it by passing a DOM selector, HTML element, or list of HTML elements.
new ClipboardJS('.btn');
Internally, we need to fetch all elements that matches with your selector and attach event listeners for each one. But guess what? If you have hundreds of matches, this operation can consume a lot of memory.
For this reason we use event delegation which replaces multiple event listeners with just a single listener. After all, #perfmatters.
Usage
We're living a declarative renaissance, that's why we decided to take advantage of HTML5 data attributes for better usability.
Copy text from another element
A pretty common use case is to copy content from another element. You can do that by adding a data-clipboard-target
attribute in your trigger element.
The value you include on this attribute needs to match another's element selector.
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard" />
</button>
Cut text from another element
Additionally, you can define a data-clipboard-action
attribute to specify if you want to either copy
or cut
content.
If you omit this attribute, copy
will be used by default.
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
As you may expect, the cut
action only works on <input>
or <textarea>
elements.
Copy text from attribute
Truth is, you don't even need another element to copy its content from. You can just include a data-clipboard-text
attribute in your trigger element.
<!-- Trigger -->
<button
class="btn"
data-clipboard-text="Just because you can doesn't mean you should â clipboard.js"
>
Copy to clipboard
</button>
Events
There are cases where you'd like to show some user feedback or capture what has been selected after a copy/cut operation.
That's why we fire custom events such as success
and error
for you to listen and implement your custom logic.
var clipboard = new ClipboardJS('.btn');
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);
});
For a live demonstration, go to this site and open your console.
Tooltips
Each application has different design needs, that's why clipboard.js does not include any CSS or built-in tooltip solution.
The tooltips you see on the demo site were built using GitHub's Primer. You may want to check that out if you're looking for a similar look and feel.
Advanced Options
If you don't want to modify your HTML, there's a pretty handy imperative API for you to use. All you need to do is declare a function, do your thing, and return a value.
For instance, if you want to dynamically set a target
, you'll need to return a Node.
new ClipboardJS('.btn', {
target: function (trigger) {
return trigger.nextElementSibling;
},
});
If you want to dynamically set a text
, you'll return a String.
new ClipboardJS('.btn', {
text: function (trigger) {
return trigger.getAttribute('aria-label');
},
});
For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the container
value.
new ClipboardJS('.btn', {
container: document.getElementById('modal'),
});
Also, if you are working with single page apps, you may want to manage the lifecycle of the DOM more precisely. Here's how you clean up the events and objects that we create.
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();
Browser Support
This library relies on both Selection and execCommand APIs. The first one is supported by all browsers while the second one is supported in the following browsers.
42+ â | 12+ â | 41+ â | 9+ â | 29+ â | 10+ â |
The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied!
when success
event is called and Press Ctrl+C to copy
when error
event is called because the text is already selected.
You can also check if clipboard.js is supported or not by running ClipboardJS.isSupported()
, that way you can hide copy/cut buttons from the UI.
Bonus
A browser extension that adds a "copy to clipboard" button to every code block on GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Medium.
Install for Chrome and Firefox.
License
MIT License © Zeno Rocha
Top Related Projects
The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
An HTML5 saveAs() FileSaver implementation
Access the system clipboard (copy/paste)
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot