Copia di un testo nella clipboard in JavaScript (Vanilla JS)
12 luglio 2021
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
per utilizzarla
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):
Il codice JavaScript seguente permette di agganciare gli eventi ad ogni singolo pulsante (classe copy-btn)
che va inizializzato chiamando
oppure nel caso non si volessere utilizzare le classi CSS di default
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);
};
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 sitoText: 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);
}
});
}
};
JavaScript
sgart.initializeCopy();
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 CSStesto da copiare (div)