Copia il testo negli appunti in JavaScript
-
Copiare il testo negli appunti utilizzando il metodo
Document.execCommand()in JavaScript - Copia il testo negli appunti utilizzando Clipboard API in JavaScript
Al giorno d’oggi, molti sviluppatori web desiderano implementare una funzionalità sui propri siti Web che consentirà ai propri utenti di copiare direttamente una serie di testo dal proprio sito Web con un solo clic. Alcuni degli esempi più comunemente usati di questo sarebbe copiare un comando del terminale o interi frammenti di codice da qualsiasi sito web tecnico.
Vediamo cosa intendiamo anche per appunti e come funziona l’intero processo. Successivamente, implementeremo questa funzionalità di copia negli appunti in JavaScript.
Tutto ciò che è presente nei nostri computer, come applicazioni, immagini, testo, file, ecc., È chiamato dati. Quindi, ogni volta che proviamo a copiare qualcosa presente nel nostro computer, il nostro computer allocherà una piccola porzione della memoria ai nostri dati che abbiamo copiato per memorizzare quei dati all’interno di quello spazio di memoria. Questo è chiamato [clipboard]), ed è così che il computer ricorda le informazioni che hai copiato. Ora che abbiamo i dati memorizzati nella memoria, possiamo prendere questi dati e poi incollarli o usarli tutte le volte che vogliamo.
Teoricamente, sembra semplice, ma praticamente è difficile da implementare perché ci sono molte complessità coinvolte. Ma non preoccuparti, usando JavaScript, possiamo fare questa cosa in un modo molto più semplice con l’aiuto del metodo Document.execCommand() e Clipboard API.
Copiare il testo negli appunti utilizzando il metodo Document.execCommand() in JavaScript
Questo è il metodo più comunemente utilizzato per interagire con gli appunti. Utilizzando questo metodo, è possibile eseguire le 3 operazioni seguenti.
- Copia il testo negli appunti utilizzando
Document.execCommand('copy') - Taglia il testo e aggiungilo agli appunti utilizzando
Document.execCommand('cut') - Incolla il contenuto che è già stato presente negli appunti utilizzando
Document.execCommand('paste')
Notare che dobbiamo passare il parametro di quale operazione vogliamo eseguire. In questo articolo ci concentreremo solo sull’operazione di copia e non sulle altre. Facciamo un esempio e comprendiamo questa operazione di copia.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button onclick="copyToClipBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClipBoard() {
var content = document.getElementById('textArea');
content.select();
document.execCommand('copy');
alert('Copied!');
}
Primo, abbiamo il file HTML con una textarea contenente una stringa e un button. Il nostro scopo qui è copiare il testo presente all’interno della textarea quando clicchiamo sul pulsante Copy. In secondo luogo, abbiamo un file JS all’interno del quale abbiamo una funzione chiamata copyToClipBoard(). Questa funzione sarà responsabile della copia del testo negli appunti.
Inizialmente, dobbiamo ottenere la textarea presente all’interno del nostro DOM utilizzando document.getElementById, e memorizzeremo questo elemento all’interno della variabile content. Ora abbiamo il contenuto della textarea all’interno della nostra variabile content. Per copiare il testo, dobbiamo prima selezionare l’intero testo utilizzando il metodo select(). Questo è simile a come selezionare il testo usando il nostro mouse.
Usando il metodo document.execCommand('copy'), copieremo il testo selezionato e mostreremo un avviso all’utente per fargli sapere che il testo è stato copiato negli appunti.
Infine, dobbiamo chiamare la funzione copyToClipBoard() sul nostro pulsante Copia come un evento onClick. Ora, se apri questa pagina HTML sul tuo browser, vedrai i risultati finali.
Copia il testo negli appunti utilizzando Clipboard API in JavaScript
La Clipboard API fornisce operazioni di lettura e scrittura asincrone tramite le quali è possibile copiare e incollare i contenuti negli e dagli appunti. L’API Clipboard è disponibile all’interno dell’oggetto navigator.clipboard.
Questa API è una nuova aggiunta al linguaggio JavaScript e non tutti i browser saranno in grado di supportarla, specialmente quelli vecchi. Se desideri verificare se il tuo browser supporta questa API o meno, puoi utilizzare il codice seguente.
if (!navigator.clipboard) {
// Clipboard API not available
return
}
Vediamo come usare l’API Clipboard per copiare del testo negli appunti.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button id="btn" onclick="copyToClickBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClickBoard() {
var content = document.getElementById('textArea').innerHTML;
navigator.clipboard.writeText(content)
.then(() => {console.log('Text copied to clipboard...')})
.catch(err => {
console.log('Something went wrong', err);
})
}
Il codice sopra è quasi simile al codice che abbiamo visto prima. L’unica differenza qui è che abbiamo modificato la funzione copyToClickBoard(). Questo metodo verrà chiamato quando premeremo il pulsante Copy. All’interno di questa funzione, otteniamo prima il testo presente all’interno della textarea utilizzando la proprietà innerHTML e memorizzando quel testo all’interno della variabile content.
L’oggetto navigator.clipboard ha due metodi. Uno è il metodo writeText() usato per copiare il testo negli appunti, e un altro è il metodo readText() che sarà usato per leggere il testo presente negli appunti incollandolo. Qui ci interessa solo il metodo writeText().
All’interno di questo metodo, dobbiamo passare la variabile content, che attualmente contiene l’intero testo in formato stringa. Dopodiché, questo metodo prenderà il testo e lo copierà negli appunti. Se questo ha successo, mostreremo un messaggio Text copied to clipboard... altrimenti lanceremo un messaggio di errore a seconda del tipo di errore che si è verificato.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn