Copia di un testo nella clipboard in JavaScript (Vanilla JS)

JavaScript mette a disposizione alcuni comandi per poter copiare un testo nella clipboard, questa funzione in Vanilla Js, permette di semplificare l'operazione di copia

JavaScript: sgart.copyText(element)Copia

var sgart = sgart || {};
/* ********************************************************************************************************************
    * funzione copy generica
    */
sgart.copyText = function (element) {
    var v = element.innerText;
    var tmpElement = document.createElement("textarea");
    if (element.tagName === "TEXTAREA" || element.tagName === "INPUT" ) {
        tmpElement.value = element.value;    
    } else {
        tmpElement.value = element.innerText;
    }
    document.body.appendChild(tmpElement);
    tmpElement.select();
    document.execCommand("Copy");
    document.body.removeChild(tmpElement);
};

per utilizzarla

JavaScriptCopia

sgart.copyText("testo da copiare");

Pulsante di copia

Può tornare utile, come in questo sito, avere un pulsante di copia che agisce su uno o più elementi del sito

Text: Prova di copiaCopia

clicca sul pulsante copia per copiarmi

Per farlo è necessario avere uno o più elementi html identificati da una classe CSS che fa da wrapper (sgart-copy-wrapper) che conterrà il pulsante e il testo da copiare.
Il pulsante andrà identificato con una specifica classe (copy-btn) così come il testo da copiare (copy-text):

HTMLCopia

<div class="sgart-copy-wrapper">
    <textarea class="copy-text">testo da copiare (textarea)</textarea>
    <button class="copy-btn">copy</button>
</div>

<div class="sgart-copy-wrapper">
    <input class="copy-text" type="text" value="testo da copiare (textbox)">
    <button class="copy-btn">copy</button>
</div>

<div class="sgart-copy-wrapper">
    <div class="copy-text">testo da <b>copiare</b> (div)</div>
    <button class="copy-btn">copy</button>
</div>

Il codice JavaScript seguente permette di agganciare gli eventi ad ogni singolo pulsante (classe copy-btn)

JavaScript: sgart.initializeCopy();Copia

// aggancio gli eventi di copia
sgart.initializeCopy = function (classWraper, classButton, classText, classCopied) {
    if(classWraper == null) {
        classWraper = "sgart-copy-wrapper";
    }
    if(classButton == null) {
        classButton = "copy-btn";
    }
    if(classText == null) {
        classText = "copy-text";
    }
    if(classCopied == null) {
        classCopied = "copy-copied";
    }
    var elements = document.getElementsByClassName(classWraper);
    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener("click", function (event) {
            // verifico se il click era sul pulsane con la classe copy-btn
            var elemBtn = event.target;
            if (elemBtn.classList.contains(classButton) === false) {
                return;
            }
            // cerco il controllo con il testo da copiare, classe copy-text
            var elemWrapper = event.currentTarget;
            var elemText = elemWrapper.getElementsByClassName(classText)[0];
            if (elemText === undefined) {
                console.log("Sgart text to copy not found");
            } else {
                sgart.copyText(elemText);
                elemBtn.classList.add(classCopied);
                setTimeout(function () { elemBtn.classList.remove(classCopied); }, 500);
            }
        });
    }
};

che va inizializzato chiamando

JavaScriptCopia

sgart.initializeCopy();

oppure nel caso non si volessere utilizzare le classi CSS di default

JavaScriptCopia

sgart.initializeCopy("my-wrapper", "my-button", "my-text", "my-copied");

Demo

Questa è una demo con il codice base senza particolari stili CSS