Comment copier du texte

Joe Medley
Joe Medley
Twitter GitHub

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

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 sélectionné.

Navigateurs pris en charge

  • 66
  • 79
  • 63
  • 13.1

Source

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, par exemple un gestionnaire de clics. Cette approche présente des limites par rapport à l'API Async Clipboard. La méthode execCommand() ne fonctionne qu'avec des éléments DOM. Comme cette opération 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.

Navigateurs pris en charge

  • 1
  • 12
  • 1
  • 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);
  });
}

Complément d'informations

Démonstration

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