想實作，點按鈕複製區塊內文字的功能。
Fiddle.js 查看效果
PS. 在這個部落格，fiddle.js result 預覽處點按鈕並不會成功複製文字，原因:
light/:66 無法複製文本： NotAllowedError: Failed to execute ‘writeText’ on ‘Clipboard’: The Clipboard API has been blocked because of a permissions policy applied to the current document. See https://goo.gl/EuHzyv for more details.
直接進入 fiddle.js，看 demo，點按鈕可以成功複製文字。(僅複製純文字，不包括文字格式，所以貼上的時候，會是一整串文字黏在一起。)
程式碼
HTML + JS
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複製文本示例</title>
</head>
<body>
<div id="text">
內容內容內容請複製這邊的內容
</div>
<button id="copyButton">複製文本</button>
<script>
function copyTextToClipboard(text) {
if (navigator.clipboard) {
// 使用 Clipboard API
return navigator.clipboard.writeText(text).then(() => {
alert('文本已複製到剪貼簿');
}).catch(err => {
alert('無法複製文本：', err)
console.error('無法複製文本：', err);
});
}
}
const text = document.getElementById('text').textContent;
// 監聽按鈕點擊事件
document.getElementById('copyButton').addEventListener('click', () => {
copyTextToClipboard(text);
});
</script>
</body>
</html>希望貼上的文字，是包括排版格式
那麼 JS 要 改成以下寫法，且複製的文字，要貼在 word 文件才能看見效果。無法貼在記事本。
// JS
async function copyHtmlToClipboard(html) {
if (navigator.clipboard) {
try {
await navigator.clipboard.write([
new ClipboardItem({
'text/html': new Blob([html], { type: 'text/html' })
})
]);
alert('文本已複製到剪貼簿');
} catch (err) {
alert('無法複製文本：' + err.message);
console.error('無法複製文本：', err);
}
} else {
alert('此瀏覽器不支持剪貼簿 API。');
}
}
const html = document.getElementById('text').innerHTML;
// 監聽按鈕點擊事件
document.getElementById('copyButton').addEventListener('click', () => {
copyHtmlToClipboard(html);
});.write() 與 .writeText()
(詢問 chatgpt 後得到的回覆)
write() 和 writeText() 是 Clipboard API 中的兩個不同方法，用於將資料寫入剪貼簿，但它們的用途和參數有所不同。以下是它們的比較和具體說明：
1. write()
- 用途：用於將多種資料類型寫入剪貼簿，包括文本、HTML、圖像等。
- 參數：需要一個包含
ClipboardItem的陣列作為參數。
const htmlContent = '<strong>這是 HTML 內容</strong>';
navigator.clipboard.write([
new ClipboardItem({
'text/html': new Blob([htmlContent], { type: 'text/html' }),
'text/plain': new Blob(['這是純文本'], { type: 'text/plain' })
})
]).then(() => {
console.log('資料已成功寫入剪貼簿');
}).catch(err => {
console.error('無法寫入剪貼簿：', err);
});
2. writeText()
- 用途：專門用於將純文本寫入剪貼簿，使用更簡單。
- 參數：只需一個字符串作為參數。
const textToCopy = '這是要複製的文本';
navigator.clipboard.writeText(textToCopy).then(() => {
console.log('文本已成功寫入剪貼簿');
}).catch(err => {
console.error('無法寫入文本：', err);
});總結
- 使用
write()方法時，可以同時寫入多種資料類型，適合需要複雜資料格式的情況。 - 使用
writeText()方法時，操作簡單且方便，適合只需寫入純文本的情況。
參考資料
- chatgpt 問事
- MDN 文件
- Document.execCommand() 已棄用，詳 MDN 文件:不推薦使用此功能。雖可能有一些瀏覽器仍然支援它，但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能，盡可能更新現有程式；請參考頁面底部的相容性表格來下決定。請注意：本功能可能隨時停止運作。
- navigator: clipboard property 導航器剪貼簿屬性
- MDN 文件: Clipboard API 剪貼簿 API 提供系統剪貼簿內容的讀寫存取。這允許 Web 應用程式實現剪切、複製和貼上功能。
- MDN 文件: 所有 Clipboard API 方法都是非同步操作的；
Promise一旦剪貼簿存取完成，它們就會傳回已解決的問題。如果剪貼簿訪問被拒絕，則 Promise 將被拒絕。 - Clipboard: write() 方法，將任意資料寫入剪貼簿，例如影像，完成
Promise後返回。這可用於實現剪切和複製功能。此方法理論上可以寫入任意資料（writeText()與只能寫入文字不同）。瀏覽器通常支援寫入文字、HTML 和 PNG 圖像資料 -有關更多信息， 請參閱瀏覽器相容性。