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); } }

---

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. Until next time. 🫡