Click button copy to clipboard

Crafting a browser-friendly solution

While navigator.clipboard is the latest and greatest, not all browsers have caught up. To achieve cross-browser compatibility, you might want to add a fallback using document.execCommand('copy'). It's a bit like language translation for your older browser buddies.

function copyText(text) {
  // "Hey, we've got something shiny here!"
  if (navigator.clipboard && window.isSecureContext) {
    return navigator.clipboard.writeText(text);
  } else {
    // "Whoa old-timer, let's take the simpler road."
    let textArea = document.createElement("textarea");
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    // "Drum roll please... Let's make this copy happen!"
    try {
      let successful = document.execCommand('copy');
      let msg = successful ? 'successful' : 'unsuccessful';
      console.log(`Copy attempt was ${msg}. Smells like victory!`);
    } catch (err) {
      console.error('Oops, unable to copy. Gremlins are in the system!', err);
    }
    // "Alright, we're done. Let's clean up this mess."
    document.body.removeChild(textArea);
  }
}

document.querySelector('.copy-btn').addEventListener('click', function() {
  let textToCopy = document.querySelector('.copy-text').innerText;
  copyText(textToCopy).then(() => alert('Text copied! Hallelujah!'));
});


Just like a cool uncle, this code ensures that every browser still gets the love.

Keeping it classy with text formatting

When you copy stylish text, you want to keep it looking good. Opt for innerHTML within contentEditable elements to maintain the formatting flare:

document.querySelector('.copy-btn').addEventListener('click', function() {
  let contentEditableDiv = document.createElement('div');
  contentEditableDiv.contentEditable = true;
  contentEditableDiv.innerHTML = document.querySelector('.copy-text').innerHTML;
  document.body.appendChild(contentEditableDiv);
  contentEditableDiv.focus();
  // "Alright folks, here's the flashy trick. Big round of applause for 'selectAll'!"
  document.execCommand('selectAll', false, null);
  document.execCommand('copy');
  document.body.removeChild(contentEditableDiv);
  alert('Formatted text copied! Keep the style alive!');
});


This keeps the panache in your copied content, ensuring the pasted text makes a grand entrance.

Beware: Security theatrics

The digital stage is full of security dramas. Make sure to follow rules:

• Use <button> for action-packed elements.
• Keep the cheers or boos loud and clear either for a successful or failed copy attempt.
• Stay away from complex illusions which can unveil security vulnerabilities or a subpar user experience.

Advanced Tips and Tricks

Rolling with the clipboard events

To extend your repertoire, consider the following:

• Clipboard events (copy, cut, paste) can be intercepted and acted upon like a "gotcha!" moment.
• The Clipboard API isn't just about text, darling. It supports copying/pasting of a myriad of data types (images too, yay!).
• Stumble upon a library called clipboard.js, it's like having an assistant doing the heavy lifting for you.

Keeping it snazzy with CSS and UX

Enhance the performance by:

• Flattering contentEditable elements with tailored CSS styles. Blend in with the cast.
• Attaching click listeners dynamically to multiply your copy buttons. More the merrier, folks!
• Being inclusive with a manual copying workaround (say Ctrl+C) for those old-school keyboard lovers.

Curtains falling, attention to troubleshooting

If there's a stage, there are occasional slip-ups too. Keep an eye out for:

• HTTPS: Clipboard API might throw tantrums on non-secure (http:) pages.
• Permissions: Some diva browsers might want the user's nod before using clipboard.
• Safari: It likes a bit of extra attention with SelectAll before copying.