Text kopieren

Joe Medley
Joe Medley
Twitter GitHub

Das Ausschneiden und Einfügen von Text ist eine der am häufigsten verwendeten Funktionen von Apps im Allgemeinen und Desktop-Anwendungen im Besonderen. Wie kopiere ich Text im Web? Es gibt einen alten und einen neuen Weg. Das hängt davon ab, welcher Browser verwendet wird.

Die moderne Art

Async Clipboard API verwenden

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

Unterstützte Browser

  • 66
  • 79
  • 63
  • 13.1

Quelle

Die klassische Art

document.execCommand() verwenden

Beim Aufrufen von document.execCommand('copy') wird ein boolescher Wert zurückgegeben, der angibt, ob der Kopiervorgang erfolgreich war. Rufen Sie diesen Befehl innerhalb einer Nutzergeste auf, z. B. mit einem Klick-Handler. Dieser Ansatz hat im Vergleich zur Async Clipboard API Einschränkungen. Die Methode execCommand() funktioniert nur mit DOM-Elementen. Da der Vorgang synchron ist, kann das Kopieren großer Datenmengen die Seite blockieren, insbesondere Daten, die transformiert oder bereinigt werden müssen.

Unterstützte Browser

  • 1
  • 12
  • 1
  • 1.3

Quelle

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