Come copiare un testo

Joe Medley
Joe Medley
GitHub

Tagliare e incollare il testo è una delle funzionalità di uso comune delle app in generale e delle applicazioni desktop in particolare. Come faccio a copiare il testo sul web? Esistono un modo vecchio e un modo nuovo. Dipende anche dal browser utilizzato.

Il modo moderno

Utilizzo dell'API Async Clipboard

Il metodo Clipboard.writeText() accetta una stringa e restituisce una promessa che viene risolta quando il testo viene scritto correttamente negli appunti. Clipboard.writeText() può essere utilizzato solo dall'oggetto window che ha lo stato attivo.

Browser Support

  • Chrome: 66.
  • Edge: 79.
  • Firefox: 63.
  • Safari: 13.1.

Source

Il modo classico

Utilizzo di document.execCommand()

La chiamata a document.execCommand('copy') restituisce un valore booleano che indica se la copia è andata a buon fine. Chiama questo comando all'interno di un'attivazione dall'utente, ad esempio un gestore di 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 di dati che devono essere trasformati o sanificati in qualche modo, può bloccare la pagina.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 69.
  • Safari: 1.3.

Source

Potenziamento 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

HTML

<!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>

CSS


        :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;
}

JS


        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);
  }
});