clipboard.js: Copy Text to the Clipboard

clipboard.js: Copy Text to the Clipboard

clipboard.js lets you easily copy text to the clipboard. At 3kb gzipped and no need for Flash, it's a great lightweight way to allow your visitors to copy bits of text and code on your site.

Installation

npm installation:

npm install clipboard --save

Bower installation:

bower install clipboard --save

Or get the package from Github and place the clipboard.min.js file manually in your project folder.

Then include the JavaScript file before the closing </body> tag:

<script src="path/to/clipboard.min.js"></script>

Finally, you’ll want to instantiate it. It this example we’re instantiating all elements with a class of clipboard:

$( document ).ready(function() {
  var clipboard = new Clipboard('.clipboard');
});

Usage

To use it, either use the data-clipboard-text data attribute:

<button class="clipboard"
   data-clipboard-text="This will be copied">
  Copy this
</button>

Or use the data-clipboard-target data attribute:

<span id="copy">This text will be copied</span>

<button class="clipboard" data-clipboard-target="#copy">
  Copy this
</button>

Handling errors

Handle success and error states easily with the success and error custom events:

$( document ).ready(function() {
  clipboard.on('success', function(e) {
    $(e.trigger).text("Copied!");
    e.clearSelection();
    setTimeout(function() {
      $(e.trigger).text("Copy");
    }, 2500);
  });

  clipboard.on('error', function(e) {
    $(e.trigger).text("Can't in Safari");
    setTimeout(function() {
      $(e.trigger).text("Copy");
    }, 2500);
  });
});

👉 Some browsers don’t support the execCommand API needed for clipboard.js to work properly. The text will still get selected, so a good workaround is to show a message telling the user to hit ctrl + c when an error event is triggered.

✖ Clear

🕵 Search Results

🔎 Searching...