Überblick
Es gibt drei primäre Browser-APIs zum Kopieren in die Zwischenablage:
- Asynchrone Zwischenablage-API
[navigator.clipboard.writeText]
- Textfokussierter Teil in Chrome 66 verfügbar (März 2018)
- Der Zugriff ist asynchron und verwendet JavaScript-Versprechen . Sie können so geschrieben werden, dass Sicherheitsbenutzer-Eingabeaufforderungen (falls angezeigt) das JavaScript auf der Seite nicht unterbrechen.
- Text kann direkt von einer Variablen in die Zwischenablage kopiert werden.
- Wird nur auf Seiten unterstützt, die über HTTPS bereitgestellt werden.
- In Chrome 66 können Seiten in aktiven Registerkarten ohne Eingabeaufforderung in die Zwischenablage schreiben.
document.execCommand('copy')
- Die meisten Browser unterstützen dies ab ~ April 2015 (siehe Browser-Unterstützung unten).
- Der Zugriff ist synchron, dh es wird JavaScript auf der Seite angehalten, bis der Vorgang abgeschlossen ist, einschließlich der Anzeige und der Interaktion des Benutzers mit Sicherheitsansagen.
- Text wird aus dem DOM gelesen und in die Zwischenablage gestellt.
- Während des Tests ~ April 2015 wurde festgestellt, dass nur Internet Explorer beim Schreiben in die Zwischenablage Berechtigungsaufforderungen anzeigt.
- Überschreiben des Kopierereignisses
- Weitere Informationen zum Überschreiben des Kopierereignisses finden Sie in der Dokumentation zur Zwischenablage-API .
- Ermöglicht das Ändern der Anzeige in der Zwischenablage bei jedem Kopierereignis. Sie können auch andere Datenformate als Nur-Text enthalten.
- Wird hier nicht behandelt, da die Frage nicht direkt beantwortet wird.
Allgemeine Entwicklungshinweise
Erwarten Sie nicht, dass Befehle in der Zwischenablage funktionieren, während Sie Code in der Konsole testen. Im Allgemeinen muss die Seite aktiv sein (Async Clipboard API) oder eine Benutzerinteraktion (z. B. ein Benutzerklick) erfordern, damit ( document.execCommand('copy')) auf die Zwischenablage zugreifen kann (siehe unten).
WICHTIG (hier vermerkt 2020/02/20)
Beachten Sie, dass seit diesem Beitrag wurde ursprünglich geschrieben in Quer Herkunft IFRAMEs deprecation von Berechtigungen und anderen IFRAME „Sandbox“ verhindert , dass die eingebetteten Demos „Run - Code - Snippet“ Tasten und „codepen.io Beispiels“ von der Arbeit in einigen Browsern (einschließlich Chrome und Microsoft Edge ).
Um eine eigene Webseite zu erstellen, stellen Sie diese Seite über eine HTTPS-Verbindung zum Testen und Entwickeln bereit.
Hier ist eine Test- / Demoseite, die die Funktionsweise des Codes demonstriert:
https://deanmarktaylor.github.io/clipboard-test/
Async + Fallback
Aufgrund der Browserunterstützung für die neue Async-Zwischenablage-API möchten Sie wahrscheinlich auf die document.execCommand('copy')Methode zurückgreifen , um eine gute Browserabdeckung zu erzielen.
Hier ist ein einfaches Beispiel (funktioniert möglicherweise nicht eingebettet in diese Site, lesen Sie den "wichtigen" Hinweis oben):
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>
(Das Beispiel codepen.io funktioniert möglicherweise nicht. Lesen Sie den "wichtigen" Hinweis oben.) Beachten Sie, dass dieses Snippet in der eingebetteten Vorschau von Stack Overflow nicht gut funktioniert. Sie können es hier ausprobieren: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011
Asynchrone Zwischenablage-API
Beachten Sie, dass Sie über die Berechtigungs-API in Chrome 66 die Berechtigung "anfordern" und den Zugriff auf die Zwischenablage testen können.
var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
document.execCommand ('copy')
Der Rest dieses Beitrags befasst sich mit den Nuancen und Details der document.execCommand('copy')API.
Browser-Unterstützung
Die JavaScript- document.execCommand('copy')Unterstützung wurde erweitert. Browser-Updates finden Sie unter den folgenden Links:
Einfaches Beispiel
(funktioniert möglicherweise nicht eingebettet in diese Site, lesen Sie den "wichtigen" Hinweis oben)
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.focus();
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
<p>
<button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
<textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>
Komplexes Beispiel: In die Zwischenablage kopieren, ohne dass Eingaben angezeigt werden
Das obige einfache Beispiel funktioniert hervorragend, wenn auf dem Bildschirm ein textareaoder input-Element angezeigt wird.
In einigen Fällen möchten Sie möglicherweise Text in die Zwischenablage kopieren, ohne ein input/ textarea-Element anzuzeigen . Dies ist ein Beispiel für eine Möglichkeit, dies zu umgehen (Element einfügen, in die Zwischenablage kopieren, Element entfernen):
Getestet mit Google Chrome 44, Firefox 42.0a1 und Internet Explorer 11.0.8600.17814.
(funktioniert möglicherweise nicht eingebettet in diese Site, lesen Sie den "wichtigen" Hinweis oben)
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
//
// *** This styling is an extra step which is likely not required. ***
//
// Why is it here? To ensure:
// 1. the element is able to have focus and selection.
// 2. if element was to flash render it has minimal visual impact.
// 3. less flakyness with selection and copying which **might** occur if
// the textarea element is not visible.
//
// The likelihood is the element won't even render, not even a
// flash, so some of these are just precautions. However in
// Internet Explorer the element is visible whilst the popup
// box asking the user for permission for the web page to
// copy to the clipboard.
//
// Place in top-left corner of screen regardless of scroll position.
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
// Ensure it has a small width and height. Setting to 1px / 1em
// doesn't work as this gives a negative w/h on some browsers.
textArea.style.width = '2em';
textArea.style.height = '2em';
// We don't need padding, reducing the size if it does flash render.
textArea.style.padding = 0;
// Clean up any borders.
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
// Avoid flash of white box if rendered for any reason.
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>
Zusätzliche Bemerkungen
Funktioniert nur, wenn der Benutzer eine Aktion ausführt
Alle document.execCommand('copy')Aufrufe müssen als direktes Ergebnis einer Benutzeraktion erfolgen, z. B. Klickereignishandler. Dies ist eine Maßnahme, um zu verhindern, dass die Zwischenablage des Benutzers durcheinander gebracht wird, wenn er dies nicht erwartet.
Weitere Informationen finden Sie im Beitrag der Google-Entwickler hier .
Zwischenablage-API
Beachten Sie, dass die vollständige Entwurfsspezifikation der Zwischenablage-API hier zu finden ist:
https://w3c.github.io/clipboard-apis/
Wird es unterstützt?
document.queryCommandSupported('copy')sollte zurückgeben, truewenn der Befehl "vom Browser unterstützt wird".- und
document.queryCommandEnabled('copy')kehren Sie zurück, truewenn der document.execCommand('copy')Erfolg erfolgreich ist, wenn Sie jetzt aufgerufen werden. Überprüfen, ob der Befehl von einem vom Benutzer initiierten Thread aufgerufen wurde und andere Anforderungen erfüllt sind.
Jedoch als Beispiel für Browser Kompatibilitätsprobleme, Google Chrome von ~ April bis ~ Oktober 2015 nur zurück trueaus , document.queryCommandSupported('copy')wenn der Befehl von einem Benutzer initiierten Thread aufgerufen wurde.
Beachten Sie die Kompatibilitätsdetails unten.
Details zur Browserkompatibilität
Während ein einfacher Aufruf zum document.execCommand('copy')Umschließen in einen try/ catch-Block, der als Ergebnis eines Benutzerklicks aufgerufen wird, Ihnen die größtmögliche Kompatibilität bietet, hat das Folgende einige Vorbehalte:
Jeder Aufruf document.execCommand, document.queryCommandSupportedoder document.queryCommandEnabledsollte in einem eingewickelt werden try/ catchBlock.
Unterschiedliche Browser-Implementierungen und Browser-Versionen lösen beim Aufrufen unterschiedliche Arten von Ausnahmen aus, anstatt zurückzukehren false.
Verschiedene Browser-Implementierungen sind noch im Fluss und die Zwischenablage-API befindet sich noch im Entwurf. Denken Sie also daran, Ihre Tests durchzuführen .