Home
| Colors: |
April 2025

Copy Selected Text To The System Copy/Pasteboard

HTML

<button class="copyButton">Copy</button>

Output

JavaScript

// NOTE: Needs to be in a type="module" to make sure
// the page is loaded before attempting to
// attach the event listener
const copyButtonEl = document.querySelector(".copyButton")
copyButtonEl.addEventListener('click', copySelection)

async function copySelection(event) {
  try {
    const selection = document.getSelection();
    const selectedText = selection.toString();
    await navigator.clipboard.writeText(
      selectedText
    )
    event.target.innerHTML = "Copied";
  } catch (err) {
    event.target.innerHTML = "Copy not copy";
  }
  await new Promise(resolve => setTimeout(resolve, 2000));
  event.target.innerHTML = "Copy";
}
end of line