Minimal JavaScript Clipboard Copy Demo

Each section shows the exact JavaScript used by the interactive result beneath it: the old execCommand route, the modern Clipboard API, a compatible fallback, and a small reusable helper with a success prompt.

1. Copy with document.execCommand() after selecting a hidden textarea

Code:
function copyWithExecCommand(text) {
  var textarea = document.createElement('textarea');
  document.body.appendChild(textarea);

  textarea.style.position = 'fixed';
  textarea.style.clip = 'rect(0 0 0 0)';
  textarea.style.top = '10px';

  textarea.value = text;
  textarea.select();

  var copied = document.execCommand('copy', true);
  document.body.removeChild(textarea);

  return copied;
}

document.querySelector('#exec-copy').addEventListener('click', function () {
  var text = document.querySelector('#exec-source').value;
  var copied = copyWithExecCommand(text);
  document.querySelector('#exec-status').textContent = copied
    ? 'Copied with execCommand(). Paste below to test.'
    : 'Copy failed in this browser.';
});
Result:

2. Copy asynchronously with the Clipboard API

Code:
function copyWithClipboardAPI(text) {
  if (navigator.clipboard) {
    return navigator.clipboard.writeText(text);
  }

  return Promise.reject(new Error('Clipboard API is unavailable.'));
}

document.querySelector('#api-copy').addEventListener('click', function () {
  var text = document.querySelector('#api-source').value;

  copyWithClipboardAPI(text)
    .then(function () {
      document.querySelector('#api-status').textContent =
        'Copied with navigator.clipboard.writeText().';
    })
    .catch(function (error) {
      document.querySelector('#api-status').textContent = error.message;
    });
});
Result:

3. Combine Clipboard API with an execCommand fallback

Code:
function copyToClipboard(text) {
  if (navigator.clipboard) {
    return navigator.clipboard.writeText(text).then(function () {
      return 'Clipboard API';
    });
  }

  var textarea = document.createElement('textarea');
  document.body.appendChild(textarea);

  textarea.style.position = 'fixed';
  textarea.style.clip = 'rect(0 0 0 0)';
  textarea.style.top = '10px';

  textarea.value = text;
  textarea.select();

  var copied = document.execCommand('copy', true);
  document.body.removeChild(textarea);

  return copied
    ? Promise.resolve('execCommand fallback')
    : Promise.reject(new Error('Copy failed.'));
}

document.querySelector('#fallback-copy').addEventListener('click', function () {
  var text = document.querySelector('#fallback-source').value;

  copyToClipboard(text)
    .then(function (method) {
      document.querySelector('#fallback-status').textContent =
        'Copied with ' + method + '.';
    })
    .catch(function (error) {
      document.querySelector('#fallback-status').textContent = error.message;
    });
});
Result:

4. Encapsulate copying as copyText(button, content) with a success prompt

Code:
function getCopyContent(content) {
  if (typeof content === 'string') {
    return content;
  }

  if (content && 'value' in content) {
    return content.value;
  }

  return content ? content.textContent : '';
}

function showCopyPrompt(button) {
  var toast = document.createElement('span');
  toast.className = 'copy-toast';
  toast.textContent = 'Copied';

  button.parentElement.appendChild(toast);
  requestAnimationFrame(function () {
    toast.classList.add('is-visible');
  });

  setTimeout(function () {
    toast.classList.remove('is-visible');
    setTimeout(function () {
      toast.remove();
    }, 200);
  }, 1200);
}

function copyText(button, content) {
  if (typeof button === 'string' && content === undefined) {
    return copyToClipboard(button);
  }

  var text = getCopyContent(content);

  return copyToClipboard(text).then(function () {
    showCopyPrompt(button);
  });
}

document.querySelector('#helper-copy-string').addEventListener('click', function () {
  copyText(this, 'Direct string copied by copyText(button, content).');
});

document.querySelector('#helper-copy-input').addEventListener('click', function () {
  copyText(this, document.querySelector('#helper-input'));
});

document.querySelector('#helper-copy-block').addEventListener('click', function () {
  copyText(this, document.querySelector('#helper-block'));
});
Result:

Element text content

This sentence came from a normal DOM element.