Come copiare un testo

Mario Rossi
Joe Medley

Taglia e incolla il testo è una delle funzionalità più utilizzate dalle app in generale e dalle applicazioni desktop in particolare. Come faccio a copiare testo sul Web? C'è un vecchio modo e un nuovo modo. Dipende dal browser utilizzato.

Il metodo Clipboard.writeText() accetta una stringa e restituisce una Promessa che si risolve quando il testo viene scritto correttamente negli appunti. Clipboard.writeText() può essere utilizzato solo dall'oggetto window impostato come attivo.

Supporto del browser

  • 66
  • 79
  • 63
  • 13.1

Fonte

Il classico

In uso: document.execCommand()

La chiamata a document.execCommand('copy') restituisce un valore booleano che indica se la copia è riuscita. Richiama questo comando all'interno di un gesto dell'utente, ad esempio un gestore dei clic. Questo approccio presenta limitazioni rispetto all'API Async Clipboard. Il metodo execCommand() funziona solo con gli elementi DOM. Poiché è sincrono, la copia di grandi quantità di dati, in particolare quelli che devono in qualche modo essere trasformati o bonificati, può bloccare la pagina.

Supporto del browser

  • 1
  • 12
  • 1
  • 1.3

Fonte

Miglioramento progressivo

const copyButton = document.querySelector('#copyButton');
const out = document.querySelector('#out');

if ('clipboard' in navigator) {
  copyButton
.addEventListener('click', () => {
    navigator
.clipboard.writeText(out.value)
   
.then(() => {
      console
.log('Text copied');
   
})
   
.catch((err) => console.error(err.name, err.message));
 
});
} else {
  copyButton
.addEventListener('click', () => {
   
const textArea = document.createElement('textarea');
    textArea
.value = out.value;
    textArea
.style.opacity = 0;
    document
.body.appendChild(textArea);
    textArea
.focus();
    textArea
.select();
   
try {
     
const success = document.execCommand('copy');
      console
.log(`Text copy was ${success ? 'successful' : 'unsuccessful'}.`);
   
} catch (err) {
      console
.error(err.name, err.message);
   
}
    document
.body.removeChild(textArea);
 
});
}

Per approfondire

Demo

<!DOCTYPE html>
<html lang="en">
 
<head>
   
<meta charset="utf-8" />
   
<meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,
<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
   
<title>How to copy text</title>
 
</head>
 
<body>
   
<h1>How to copy text</h1>
   
<textarea rows="3">
Some sample text for you to copy. Feel free to edit this.
</textarea
   
>
   
<button type="button">Copy</button>
 
</body>
</html>

       
:root {
 
color-scheme: dark light;
}

html
{
 
box-sizing: border-box;
}

*,
*:before,
*:after {
 
box-sizing: inherit;
}

body
{
 
margin: 1rem;
 
font-family: system-ui, sans-serif;
}

button
{
 
display: block;
}
       

       
const textarea = document.querySelector('textarea');
const button = document.querySelector('button');

button
.addEventListener('click', async () => {
 
try {
    await navigator
.clipboard.writeText(textarea.value);
 
} catch (err) {
    console
.error(err.name, err.message);
 
}
});