Text per Klick in die Zwischenablage kopieren

Die Clipboard API kopiert Text per Klick in die Zwischenablage. Ein Button, eine Zeile JavaScript, fertig. jQuery oder andere Bibliotheken brauchst du dafür nicht mehr.

Bis 2019 war document.execCommand("copy") die einzige Möglichkeit. Diese Methode gilt seit 2020 als veraltet und wird von manchen Browsern bereits eingeschränkt. Die moderne Clipboard API ist einfacher, sicherer und funktioniert in allen aktuellen Browsern.

Clipboard API: Die moderne Methode

Die Clipboard API ist Teil der Web Platform und wird von Chrome, Firefox, Safari und Edge unterstützt. Der entscheidende Befehl ist navigator.clipboard.writeText(). Er schreibt einen beliebigen String in die Zwischenablage des Nutzers.

So sieht die einfachste Umsetzung aus:

<button onclick="navigator.clipboard.writeText('Hallo Welt')">
  Text kopieren
</button>

Ein Klick auf den Button kopiert den Text "Hallo Welt" in die Zwischenablage. Der Nutzer kann ihn danach mit Strg+V an beliebiger Stelle einfügen.

Text aus einem HTML-Element kopieren

In der Praxis willst du meistens den Inhalt eines bestimmten Elements kopieren. Zum Beispiel ein Emoji, einen Code-Schnipsel oder eine Zeichenfolge. Dafür liest du den Textinhalt per textContent aus:

<span id="mein-text">Diesen Text kopieren</span>
<button onclick="navigator.clipboard.writeText(
  document.getElementById('mein-text').textContent
)">Kopieren</button>

Willst du stattdessen HTML-Formatierung mitkopieren, nutze innerHTML statt textContent. Für reinen Text ist textContent die bessere Wahl, weil es keine HTML-Tags mitschleppt.

Visuelles Feedback nach dem Kopieren

Ohne Rückmeldung weiß der Nutzer nicht, ob das Kopieren geklappt hat. Ein kurzer Hinweis am Button löst das Problem. Hier eine Funktion, die den Button-Text kurz ändert:

function kopieren(text, button) {
  navigator.clipboard.writeText(text).then(function() {
    var original = button.textContent;
    button.textContent = 'Kopiert!';
    setTimeout(function() {
      button.textContent = original;
    }, 1500);
  });
}

Den Aufruf im HTML:

<span id="emoji1">✌</span>
<button onclick="kopieren(
  document.getElementById('emoji1').textContent, this
)">Kopieren</button>

Nach dem Klick zeigt der Button 1,5 Sekunden lang "Kopiert!" und springt dann zum ursprünglichen Text zurück. Du kannst die Dauer im setTimeout anpassen.

Live-Demo

Klicke auf "Kopieren" und füge den Text anschließend mit Strg+V in ein beliebiges Textfeld ein:

✌ Kopieren

🚀 Kopieren

Copy & Paste Kopieren

Warum nicht mehr document.execCommand("copy")?

Bis etwa 2019 war document.execCommand("copy") der Standardweg. Die Methode hatte mehrere Nachteile: Sie brauchte ein unsichtbares Textfeld als Zwischenschritt, war synchron und blockierte damit kurzzeitig die Seite. Außerdem erforderte sie in vielen Fällen jQuery als Abhängigkeit.

So sah der alte Code aus, den ich damals auch hier im Blog verwendet habe:

<script>
  var $ = jQuery;
  function copyToClipboard(element) {
    var $temp = $("<input />");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
  }
</script>

Die Zeile var $ = jQuery; war nötig, weil WordPress das Dollar-Zeichen nicht automatisch an jQuery bindet. Ohne diese Zeile kam der Fehler Uncaught TypeError: $ is not a function. Diesen Tipp hatte ich damals bei Stack Overflow gefunden.

Seit 2020 gilt execCommand offiziell als "deprecated". Alle großen Browser unterstützen es noch, aber es kann jederzeit entfernt werden. Für neue Projekte solltest du die Clipboard API verwenden.

Clipboard API: Einschränkungen und Hinweise

Die Clipboard API funktioniert nur in einem sicheren Kontext. Das bedeutet: Die Seite muss über HTTPS ausgeliefert werden. Auf http:// verweigern Browser den Zugriff. Lokale Entwicklung über localhost funktioniert trotzdem.

Außerdem muss der Kopiervorgang durch eine Nutzeraktion ausgelöst werden - also durch einen Klick oder Tastendruck. Ein Script, das beim Laden der Seite automatisch etwas in die Zwischenablage schreibt, blockiert der Browser aus Sicherheitsgründen.

Safari hat bis Version 13.1 die Clipboard API nicht unterstützt. Seit 2020 funktioniert sie aber auch dort zuverlässig. Wenn du sehr alte Browser abfangen willst, kannst du eine Prüfung einbauen:

if (navigator.clipboard) {
  navigator.clipboard.writeText(text);
} else {
  // Fallback fuer sehr alte Browser
  var input = document.createElement('input');
  input.value = text;
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
}

In der Praxis ist dieser Fallback nur selten nötig. Alle Browser mit einem Marktanteil über 1% unterstützen die Clipboard API seit mindestens 2020.

Vollständiger Code zum Kopieren

Hier der komplette Code, den du direkt in deine Seite einbauen kannst. Er enthält die Kopierfunktion mit visuellem Feedback und den Fallback für ältere Browser:

<script>
function kopieren(text, button) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text).then(function() {
      feedback(button);
    });
  } else {
    var input = document.createElement('input');
    input.value = text;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    feedback(button);
  }
}

function feedback(button) {
  var original = button.textContent;
  button.textContent = 'Kopiert!';
  setTimeout(function() {
    button.textContent = original;
  }, 1500);
}
</script>

Und das passende HTML für einen kopierbaren Text:

<span id="mein-text">Dieser Text wird kopiert</span>
<button onclick="kopieren(
  document.getElementById('mein-text').textContent, this
)">Kopieren</button>

Für mehrere kopierbare Elemente vergibst du unterschiedliche IDs (text1, text2, ...) und passt den getElementById-Aufruf entsprechend an. Die Funktion kopieren() musst du nur einmal einbinden.

FAQ

Verwandte Artikel

• Herz-Emojis zum Kopieren - Alle Herz-Symbole und Emoticons auf einen Blick
• YouTube-Emojis - Emojis für YouTube-Kommentare zum Kopieren
• Alle HTML5-Elemente im Überblick - Referenz für HTML-Tags und Attribute

Quellen

• MDN Web Docs: Clipboard.writeText()
• web.dev: Async Clipboard API
• Can I Use: Clipboard API writeText