JavaScript: Select Content and Copy to Clipboard (Snippet)

ℹ️ For Any Element

Applicable for input and textarea elements.

Also general DOM elements:

• div
• p
• blockquote
• span
• strong
• em
• Et cetera.

---

🧑‍💻 Snippet

/** * Copies the text content of a DOM element to the clipboard using the Clipboard API. * * Supports input, textarea, and general DOM elements (e.g., div, span). * * @param {HTMLElement} elm - The element whose content will be copied. * @throws {Error} If the argument is not an HTML element. * @throws {Error} If the Clipboard API is unavailable. * @returns {Promise<void>} Resolves when content is copied successfully. * * @example * const input = document.querySelector('input'); * await copyToClipboard(input); * * const div = document.getElementById('textContent'); * await copyToClipboard(div); */ async function copyToClipboard(elm) { const isElement = elm instanceof HTMLElement; if (!isElement) { throw new Error(`${elm} is not a DOM element.`); } const isClipboardAvailable = navigator?.clipboard?.writeText; if (!isClipboardAvailable) { const ua = navigator?.userAgent || "⁉️" throw new Error(`This browser [${ua}] does not support Clipboard API.`); } try { let content = ""; if ( elm instanceof HTMLInputElement || elm instanceof HTMLTextAreaElement ) { elm.focus(); elm.select(); content = elm.value.trim(); } else { const range = document.createRange(); range.selectNodeContents(elm); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); content = elm.innerText.trim(); } await navigator.clipboard.writeText(content); } catch (error) { console.error(error); } }

---

Usage

How to use:

// Function definition. async function copyToClipboard(elm) { /*...*/ } // One element. // Define the element with the text. For instance, its id is "my-element". const myElement = document.getElementById("my-element"); // On a click event, trigger the copyToClipboard function. myElement.onclick = () => { copyToClipboard(myElement); }; // ———————————————————————————————————————————————————————— // Multiple elements. // Define the elements. For instance, their className is "my-element". const myElements = document.querySelectorAll(".my-element"); /** * Use forEach then attach a click listener * to trigger the copyToClipboard function. */ myElements.forEach((elm) => { elm.onclick = () => { copyToClipboard(elm); }; });

Or use .addEventListener("click", callbackFunction) so we can remove it afterwards with .removeEventListener("click", callbackFunction).

Promise-Based

This snippet is a Promise-based function.

We can put await or attach .then() if there's a follow-up method after the completion.

Example with await

Assuming it's invoked inside an async function or at the top level of a module.

await copyToClipboard(elm); // Next method. // ...

Example with .then()

copyToClipboard(elm).then(() => { // Next method here. // ... }).catch((error) => { /* Error handling. */ });

---

Selection Method

The selection methods are differentiated to accommodate different types of DOM element.

input and textarea

It is from this part of the script:

... if ( elm instanceof HTMLInputElement || elm instanceof HTMLTextAreaElement ) { elm.focus(); elm.select(); ...

• HTMLInputElement = input element.
• HTMLTextAreaElement = textarea element.

General DOM Elements

From this part of the script:

... } else { const range = document.createRange(); range.selectNodeContents(elm); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); ...

Copy Method

This function uses Clipboard API as the substitute for the deprecated document.execCommand() method.

This part of the script:

... await navigator.clipboard.writeText(content); ...

---

Thank you for visiting. 👋