Lo Zibaldone Informatico - JavaScript Copy To Clipboard

Copia il contenuto di un campo di input o di un elemento generico.

1. Copia da un Campo di Input
Questo metodo è il più semplice e diretto. Quando hai un campo di input, come un box di testo o un'area di testo, è facile selezionare e copiare il contenuto con un singolo clic. Il browser fornisce automaticamente un metodo per selezionare e copiare il contenuto dell'input.
Esempio: Hai un campo in cui puoi inserire del testo. Cliccando sul pulsante di copia, il testo viene copiato immediatamente negli appunti.
Uso tipico: Copiare password, codici o qualsiasi testo che l'utente può modificare.

2. Copia da un Elemento Non Modificabile
Se il testo non si trova in un campo di input (ad esempio, in un blocco di testo o un codice all'interno di un div o span), il browser non fornisce un modo nativo per selezionarlo e copiarlo automaticamente. In questo caso, utilizziamo un piccolo trucco con JavaScript: creiamo un elemento temporaneo invisibile che contiene il testo e usiamo quel testo per copiarlo negli appunti.
Esempio: Stai visualizzando un blocco di codice o un paragrafo di testo su una pagina. Cliccando sul pulsante di copia, il testo viene copiato senza bisogno di evidenziarlo manualmente.
Uso tipico: Copiare porzioni di testo, come codici sorgente o descrizioni non modificabili.

Differenze in Breve:

Input: Viene copiato direttamente il contenuto, sfruttando il metodo nativo del browser per selezionare e copiare.

Elemento Generico: Il contenuto deve essere copiato in modo indiretto, utilizzando un'area temporanea in background.

Metodo 1

<!DOCTYPE html>
<html>
<head>
<script>
function fnct_copy(text)
	{
	navigator.clipboard.writeText(text);
	}
</script>
</head>
<body>
<input id="input_id" value="testo da copiare">
<input id="btn_id" type="button" value="Copy to clipboard">
<script>
document.getElementById("btn_id").addEventListener("click", function(){fnct_copy(document.getElementById("input_id").value);})
</script>
</body>
</html>

Output

Metodo 2 - HTML

<pre><code id="code1">Questo è un testo di esempio.</code></pre>
<button class="" onclick="copyCode('code1', this)">Copia Codice</button>

Metodo 2 - Javascript

function copyCode(codeId, button) {
    // Seleziona il codice da copiare
    const code = document.getElementById(codeId).innerText;
    
    // Crea un elemento temporaneo per copiare il testo
    const tempElement = document.createElement("textarea");
    tempElement.value = code;
    document.body.appendChild(tempElement);
    tempElement.select();
    document.execCommand("copy");
    document.body.removeChild(tempElement);

    // Cambia l'etichetta del pulsante
    button.innerText = "Codice copiato!";
    
    // Ripristina il testo dopo 2 secondi
    setTimeout(() => {
        button.innerText = "Copia Codice";
    }, 2000);
}

Output

Questo è un testo di esempio.