Button zum Kopieren in die Zwischenablage (JavaScript und React)
Button zum Kopieren in die Zwischenablage
In die Zwischenablage kopieren: Button in JavaScript und React | We.Inc
Baue einen Kopier-Button mit navigator.clipboard.writeText: funktionierende Demo, ein React-Hook, Kopieren von HTML und Bildern mit ClipboardItem, barrierefreies Feedback beim Kopieren und Fehlerbehandlung.
Rufe navigator.clipboard.writeText(text) in einem Klick-Handler auf. Es gibt ein Promise zurück, warte also mit await darauf, zeige dann eine kurze Meldung wie Kopiert an und fange den Fehlerfall ab. Die API funktioniert nur über HTTPS oder auf localhost und braucht eine echte Nutzeraktion wie einen Klick, rufe sie also nicht beim Laden der Seite auf.
Ein Kopier-Button wirkt trivial, doch die Snippets, die gut ranken, lassen oft genau die Teile weg, die schiefgehen: Das Promise kann fehlschlagen, eingebettete Frames können blockiert sein, und Screenreader-Nutzer erfahren nie, dass etwas passiert ist. Die Demo unten kopiert wirklich in deinem Browser, und der Code deckt jeden dieser Fälle ab.
Drücke in der Demo einen Kopieren-Button. Die Beschriftung wechselt für zwei Sekunden zu Kopiert, und eine versteckte Statusmeldung sagt es an.
Füge den Inhalt in das Testfeld ein, um genau zu prüfen, was in deiner Zwischenablage gelandet ist.
Probiere den Button für formatierten Text und füge das Ergebnis dann in eine E-Mail oder ein Textdokument ein, um zu sehen, dass die HTML-Version ihre Formatierung behält.
Kopiere unten das reine JavaScript, den React-Hook oder den Code für formatiertes Kopieren.
Behandle Fehler immer. Zeige etwa Drücke Ctrl+C zum Kopieren an und markiere den Text, damit die Person es von Hand abschließen kann.
Melde Erfolg mit einem role="status"-Bereich. Nur ein Icon zu ändern sagt Screenreader-Nutzern nichts.
Halte die Breite der Button-Beschriftung stabil, wenn sie zu Kopiert wechselt, damit nichts drumherum springt.
Kopiere den Wert aus deinen Daten, nicht aus dem innerText eines gestylten Elements, der verborgenen oder zusätzlichen Leerraum enthalten kann.
In einem iframe braucht Chromium die Erlaubnis des Elternelements für clipboard-write über die Permissions Policy, zum Beispiel allow="clipboard-write".
Häufige Fragen
Warum ist navigator.clipboard undefined?
Die Seite befindet sich nicht in einem sicheren Kontext. Die Clipboard API steht nur auf HTTPS-Seiten und auf localhost zur Verfügung, eine Website, die über reines HTTP oder eine lokale Netzwerkadresse ausgeliefert wird, hat sie also nicht.
Warum wirft writeText einen NotAllowedError?
Der Browser hat das Schreiben verweigert, meist weil es keine aktuelle Nutzeraktion gab, die Seite nicht fokussiert war oder ein Frame durch die Permissions Policy blockiert wurde. Rufe es direkt in einem Klick-Handler auf und vermeide lange awaits davor.
Brauche ich in React eine Bibliothek zum Kopieren in die Zwischenablage?
Nein. Ein zehnzeiliger Hook um navigator.clipboard.writeText reicht aus. Bibliotheken ergänzen meist nur einen execCommand-Fallback für sehr alte Browser, den aktuelle Browser nicht brauchen.
Kann ich ein Bild in die Zwischenablage kopieren?
Ja, mit navigator.clipboard.write und einem ClipboardItem, dessen Schlüssel image/png und dessen Wert ein PNG-Blob ist. Prüfe einen Typ vorher mit ClipboardItem.supports(), PNG ist das Format, das Browser am zuverlässigsten annehmen.
Ist document.execCommand('copy') noch in Ordnung?
Es ist veraltet. In vielen Browsern funktioniert es unter wechselnden Bedingungen noch, aber neuer Code sollte die asynchrone Clipboard API verwenden und als Fallback die Person bitten, manuell zu kopieren.
Die drei Regeln, die der Browser durchsetzt
Das Schreiben in die Zwischenablage ist eine privilegierte Aktion, deshalb verlangen Browser eine sichere Seite, ein fokussiertes Dokument und, in Firefox und Safari, für jeden Schreibvorgang eine frische Nutzergeste. Chromium kann außerdem eine dauerhafte clipboard-write-Berechtigung erteilen.
In der Praxis heißt das: Löse das Kopieren durch einen Klick oder Tastendruck aus, schreibe früh im Handler und behandle einen Fehlschlag als normalen Fall, nicht als Ausnahme.
Feedback, das Menschen wahrnehmen können
Ändere die Beschriftung für etwa zwei Sekunden zu Kopiert und stelle sie dann wieder her. Ein Tooltip, der nur beim Hovern erscheint, ist auf Touchscreens und für Tastaturnutzer unsichtbar.
Setze dieselbe Meldung in eine höfliche Live-Region. role="status" sagt sie an, ohne das zu unterbrechen, was der Screenreader gerade vorliest.
Formatiertes Kopieren und eigene copy-Events
Ein ClipboardItem kann gleichzeitig eine text/plain- und eine text/html-Version enthalten. Apps, die HTML verstehen, fügen die formatierte ein, reine Textfelder nehmen die andere.
Um zu ändern, was ein normales Ctrl+C kopiert, etwa um eine Quellenzeile hinzuzufügen, lausche auf das copy-Event, rufe event.preventDefault() auf und setze deine eigenen Daten mit event.clipboardData.setData().
Reines JavaScript
Kopier-Button mit Feedback und Fallback
Das Status-Element ist visuell verborgen, wird aber vorgelesen. Bei einem Fehler wird der Text markiert, damit die Person Ctrl+C oder Cmd+C drücken kann.
React-Hook
useCopyToClipboard
Gibt den Zustand und eine copy-Funktion zurück. Der Timer wird beim Unmount gelöscht, damit er nie eine entfernte Komponente aktualisiert.
Formatierter Text, Bilder und das copy-Event
HTML mit Fallback als reiner Text kopieren
Jeder MIME-Typ ist ein Blob. Einfügeziele wählen das reichhaltigste Format, das sie verstehen.
Normalen Kopien eine Quellenzeile hinzufügen
Sparsam einsetzen. Zu ändern, was Leute kopieren, kann sie nerven, beschränke es also auf Zitate oder Code, bei denen eine Quelle hilft.
Fehler und ihre Ursachen
Wenn das Kopieren fehlschlägt
Was du siehst
Wahrscheinliche Ursache
Lösung
navigator.clipboard ist undefined
Seite wird über reines HTTP ausgeliefert
Über HTTPS ausliefern oder auf localhost testen
NotAllowedError
Keine Nutzergeste, oder der Tab ist nicht fokussiert
Im Klick-Handler aufrufen
NotAllowedError in einem iframe
Permissions Policy blockiert clipboard-write
allow="clipboard-write" am iframe ergänzen
Kopieren des Bilds abgelehnt
Nicht unterstützter MIME-Typ
In PNG umwandeln und ClipboardItem.supports() prüfen
Kopiert
Fehlgeschlagen
Kopieren
Formatierten Text kopieren
In die Zwischenablage kopiert
Kopieren fehlgeschlagen. Markiere den Text und drücke Ctrl+C oder Cmd+C.
Probier es aus
Kopier-Buttons für reinen Text und formatiertes HTML, mit einem Einfügefeld zum Prüfen des Ergebnisses.