Passaggio all'ora solare 31 ottobre 2021 03:00 02:00 sposta indietro l'orologio di 1 ora (si dorme 1 ora in più)
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)
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
JavaScript
sgart.copyText("testo da copiare");
Su alcuni browser, la prima volta che viene usata, può comparire un popup di conferma.

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 copia
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):
HTML
<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>
L'elemento da copiare può essere indifferentemente una text area, una input box o un elemento html come un div o span.

Il codice JavaScript seguente permette di agganciare gli eventi ad ogni singolo pulsante (classe copy-btn)
JavaScript: sgart.initializeCopy();
// 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
JavaScript
sgart.initializeCopy();
oppure nel caso non si volessere utilizzare le classi CSS di default
JavaScript
sgart.initializeCopy("my-wrapper", "my-button", "my-text", "my-copied");
L'ultimo parametro è la classe che viene applicata per dare una conferma di copia avvenuta.

Demo

Questa è una demo con il codice base senza particolari stili CSS
testo da copiare (div)
Potrebbe interessarti anche: