Text kopieren

Joe Medley
Joe Medley
GitHub

Das Ausschneiden und Einfügen von Text ist eine der am häufigsten verwendeten Funktionen von Apps im Allgemeinen und von Desktopanwendungen im Besonderen. Wie kopiere ich Text im Web? Es gibt eine alte und eine neue Methode. Außerdem hängt es davon ab, welcher Browser verwendet wird.

Die moderne Methode

Async Clipboard API verwenden

Die Clipboard.writeText() Methode verwendet einen String und gibt ein Promise zurück, das aufgelöst wird, wenn Text erfolgreich in die Zwischenablage geschrieben wurde. Clipboard.writeText() kann nur über das window-Objekt verwendet werden, das den Fokus hat.

Browser Support

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

Source

Die klassische Methode

document.execCommand() verwenden

Der Aufruf von document.execCommand('copy') gibt einen booleschen Wert zurück, der angibt, ob das Kopieren erfolgreich war. Rufen Sie diesen Befehl in einer Nutzergeste wie einem Klick-Handler auf. Dieser Ansatz hat im Vergleich zur Async Clipboard API Einschränkungen. Die Methode execCommand() funktioniert nur mit DOM-Elementen. Da sie synchron ist, kann das Kopieren großer Datenmengen, insbesondere von Daten, die auf irgendeine Weise transformiert oder bereinigt werden müssen, die Seite blockieren.

Browser Support

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

Source

Progressive Enhancement

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

Weitere Informationen

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