Comment copier du texte

Joe Medley
Joe Medley
GitHub

Couper-coller du texte est l'une des fonctionnalités les plus couramment utilisées dans les applications en général et dans les applications de bureau en particulier. Comment copier du texte sur le Web ? Il existe une ancienne et une nouvelle méthode. Cela dépend également du navigateur utilisé.

La méthode moderne

Utiliser l'API Async Clipboard

La méthode Clipboard.writeText() prend une chaîne et renvoie une promesse qui se résout lorsque le texte est correctement écrit dans le presse-papiers. Clipboard.writeText() ne peut être utilisé qu'à partir de l'objet window qui est sélectionné.

Browser Support

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

Source

La méthode classique

Utiliser document.execCommand()

L'appel de document.execCommand('copy') renvoie une valeur booléenne indiquant si la copie a réussi. Appelez cette commande dans un geste de l'utilisateur, tel qu'un gestionnaire de clics. Cette approche présente des limites par rapport à l'API Async Clipboard. La méthode execCommand() ne fonctionne qu'avec les éléments DOM. Comme elle est synchrone, la copie de grandes quantités de données, en particulier celles qui doivent être transformées ou nettoyées d'une manière ou d'une autre, peut bloquer la page.

Browser Support

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

Source

Amélioration progressive

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

Documentation complémentaire

Démo

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