Get started with clipboard-polyfill CDN

MIT licensed

Clipboard-polyfill: library for native copy-paste on unsupported elements.

Tags:
  • clipboard
  • HTML5
  • copy
  • copying
  • cut
  • paste
  • execCommand
  • setData
  • getData
  • polyfill

Stable version

Copied!

How to start using clipboard-polyfill CDN


// Import clipboard-polyfill from the CDN
import ClipboardJS from 'https://cdn.cdnhub.io/clipboard-polyfill/4.0.2/es6/clipboard-polyfill.es6.js';

// Create a new instance of ClipboardJS
const clipboard = new ClipboardJS('.copy-button');

// Define the button element with the copy-button class
const copyButton = document.querySelector('.copy-button');

// Add an event listener to the button for click events
copyButton.addEventListener('click', () => {
  // Get the text to be copied
  const textToCopy = copyButton.getAttribute('data-text');

  // Attempt to copy the text using clipboard.writeText()
  clipboard.writeText(textToCopy)
    .then(() => {
      console.log('Text copied to clipboard successfully!');
    })
    .catch((err) => {
      console.error('Failed to copy text: ', err);
    });
});
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions