JavaScript Copy to Clipboard Functionality

Implement a "copy to clipboard" feature for text content using modern JavaScript. Useful for sharing code snippets, links, or any text data easily.

#javascript

#copy to clipboard

#clipboard api

#utility

#text manipulation

/HTML *CSS ()JS Output Live Updates

const copyButton = document.getElementById('copyButton');
const textToCopy = document.getElementById('textToCopy');
const copyStatus = document.getElementById('copyStatus');

copyButton.addEventListener('click', () => {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(textToCopy.value)
      .then(() => {
        copyStatus.textContent = 'Copied to clipboard!';
        setTimeout(() => { copyStatus.textContent = ''; }, 2000);
      })
      .catch(err => {
        copyStatus.textContent = 'Failed to copy!';
        console.error('Failed to copy text: ', err);
        // Fallback for older browsers can be added here if needed
      });
  } else {
    // Fallback for older browsers (less secure, might not always work)
    textToCopy.select();
    try {
      document.execCommand('copy');
      copyStatus.textContent = 'Copied to clipboard! (fallback)';
    } catch (err) {
      copyStatus.textContent = 'Failed to copy! (fallback)';
    }
    window.getSelection().removeAllRanges(); // Deselect
    setTimeout(() => { copyStatus.textContent = ''; }, 2000);
  }
});