最近需要使用到Javascript的復制功能。
查詢資料，總結如下內容：
有三種主要的瀏覽器API可復制到剪貼板 (以下在 console 中直接執(zhí)行是無效的)：
1、Async Clipboard API [navigator.clipboard.writeText]
- 訪問是異步的，并且使用JavaScript Promises，可以編寫，因此安全用戶提示（如果顯示）不會中斷頁面??中的JavaScript。
- 文本可以直接從變量復制到剪貼板。
- 僅在通過HTTPS服務的頁面上受支持。
- 在Chrome 66中，活動標簽中的頁面可以寫入剪貼板而沒有權限提示。
2、document.execCommand('copy')
- 截至2015年4月，大多數瀏覽器都支持此功能（請參閱下面的瀏覽器支持）。
- 訪問是同步的，即在頁面中停止JavaScript直到完成，包括顯示和用戶與任何安全提示進行交互。
- 從DOM中讀取文本并將其放置在剪貼板上。
- 在2015年4月?測試期間，只有Internet Explorer被記錄為在寫入剪貼板時顯示權限提示。
3、覆蓋復制事件
請參閱剪貼板API文檔中有關覆蓋復制事件的信息。
允許您通過任何復制事件來修改剪貼板上顯示的內容，可以包括除純文本之外的其他數據格式。
這里沒有涵蓋，因為它不能直接回答問題。
在控制臺中測試代碼時，不要期望剪貼板相關的命令能夠正常工作。通常，頁面需要處于活動狀態(tài)（異步剪貼板API）或需要用戶交互（例如，用戶單擊）才能允許（
document.execCommand('copy')）訪問剪貼板，有關更多詳細信息，請參見下文。
下面是一個示例：
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');
});
具體運行效果可以在這里看到：https://deanmarktaylor.github.io/clipboard-test/
