Corsi on-line

Copiare testi negli appunti con JavaScript

Inserire un pulsante per copiare porzioni di testo presenti in una pagina Web negli appunti del proprio sistema è un’operazione relativamente semplice, soprattutto ora che il metodo JavaScript execCommand() è supportato dalla maggior parte dei browser Internet più utilizzati. Vedremo quindi a cosa serve questo costrutto e come utilizzarlo per i nostri progetti.

javascriptIn pratica execCommand() è un metodo che consente di attivare delle istruzioni per la manipolazione dei contenuti di un’area o componente di pagina editabile; queste istruzioni possono coinvolgere un elemento selezionato, ad esempio una stringa delimitata da tag, inserire un ulteriore elemento, ad esempio un link, o isolare un’intera linea di codice sulla base della sua indentazione.

E’ possibile utilizzare execCommand() in associazione con diversi metodi, nel caso del nostro script faremo riferimento a querySelector()che ha il compito di restituire il primo elemento che corrisponde ad uno specifico selettore CSS; si differenzia quindi da querySelectorAll() che invece restituisce tutti gli elementi che corrispondono ad un determinato selettore.

Partiremo quindi con la creazione di una semplice pagina HTML contenete un campo di input e il pulsante per attivare il comando di copia:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Copiare un testo negli appunti con JavaScript</title>
</head>
<body>
<div class="myinput">
<h1>Premi il pulsante e copia il testo</h1>
<input type="text" id="testo-da-copiare" value="Blah! Blah! Blah!"/>
<input type="button" id="pulsante-da-premere" value="Copia negli appunti">
</div>
</body>
</html>

Ora passiamo al codice JavaScript:

document.querySelector("#pulsante-da-premere").onclick = function() {
// selezione del contenuto
document.querySelector("#testo-da-copiare").select();
// copia negli appunti
document.execCommand('copy');
};

In sostanza il comando copy() ha il compito di copiare la selezione corrente (cioè quella che nel nostro esempio viene identificata dal metodo querySelector()) negli appunti del sistema utilizzato. In alternativa è possibile utilizzare anche cut(), un comando che oltre a copiare la porzione di contenuto selezionata la taglia, esattamente come accade con il menù contestuale attivato dal tasto destro del mouse.

Post correlati
I più letti del mese
Tematiche