Copy to Clipboard Javascript Snippet

copy2clipboard.html

<div>
  <button class="copyprompt" onclick="copyElemTextToClipboard('.chatgpt-prompt')">Click to copy</button>
  <div class="copyerrormsg">Unable to copy. Please manually select and copy the prompt.</div>
</div>

<style>
  .copyerrormsg {
    margin-left: 10px;
    color: red;
    font-weight: bold;
    display: none;
  }
</style>

<script>
  (function () {
    const copyErrorSelector = '.copyerrormsg';
    const errorElems = document.querySelectorAll(copyErrorSelector);

    document.querySelector('button.copyprompt').onclick = function (event) {
      copyTextToClipboard(event, '.chatgpt-prompt');
    };



    function copyTextToClipboard(event, promptSelector) {
      hideErrors();
      const element = document.querySelector(promptSelector);
      const button = event.target;
      if (element) {
        const text = element.innerText || element.textContent;
        if (navigator.clipboard && window.isSecureContext) {
          window.focus();
          navigator.clipboard.writeText(text).then(function () {
            copySucceeded(button);
          }, function (err) {
            console.error('Error in copying text: ', err);
            console.error('Attempting fallback method...');
            fallbackCopy(text, button);
          });
        } else {
          fallbackCopy(text, button);
        }
      } else {
        console.error('Element not found');
      }
    }

    function fallbackCopy(text, button) {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      textarea.style.position = 'fixed';
      document.body.appendChild(textarea);
      window.focus();
      textarea.focus();
      textarea.select();
      try {
        const successful = document.execCommand('copy');
        if (successful) {
          copySucceeded(button);
        } else {
          copyFailed(button);
        }
      } catch (err) {
        copyFailed(button, err);
      } finally {
        document.body.removeChild(textarea);
      }
    }

    function copySucceeded(button) {
      console.log('Text copied to clipboard');
      const originalText = button.textContent;
      // Reset button text after 3 seconds
      setTimeout(() => updateButtonText(button, originalText), 3000);
      updateButtonText(button, 'Copied!');
      // Scroll to next step
      setTimeout(() => { smoothScrollToElement('.step-after-copy') }, 400);
    }

    function copyFailed(button, err) {
      console.error('Error in copying text: ', err);
      const errorElem = button.parentNode.querySelector(copyErrorSelector);
      debugger;
      if (errorElem) {
        errorElem.style.display = 'block';
      }
    }

    function hideErrors() {
      errorElems.forEach((elem) => elem.style.display = 'none');
    }

    function updateButtonText(button, text) {
      button.textContent = text;
    }

    function smoothScrollToElement(elem) {
      const element = document.querySelector(elem);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      } else {
        console.error('Element not found');
      }
    }
  })();
</script>