想實做出,點擊按鈕,複製文字的功能。
fiddle.js 看效果 (連結)
程式碼
HTML
<div id="textToCopy">這是要複製的文本內容。</div>
<button id="copyButton">複製文本</button>
// JS
const copyButton = document.getElementById('copyButton');
const textToCopy = document.getElementById('textToCopy');
copyButton.addEventListener('click', () => {
const range = document.createRange(); // 建立物件
range.selectNode(textToCopy); // 設定範圍在指定節點
window.getSelection().removeAllRanges(); // 清除當前的選擇
window.getSelection().addRange(range); // 選擇文本
try {
const successful = document.execCommand('copy'); // 複製文本
const msg = successful ? '已複製到剪貼簿!' : '複製失敗!';
alert(msg);
} catch (err) {
console.error('複製失敗', err);
}
window.getSelection().removeAllRanges(); // 清除選擇
});
HTML + JS
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複製DIV文字</title>
</head>
<body>
<div id="textToCopy">這是要複製的文本內容。</div>
<button id="copyButton">複製文本</button>
<script>
const copyButton = document.getElementById('copyButton');
const textToCopy = document.getElementById('textToCopy');
copyButton.addEventListener('click', () => {
const range = document.createRange(); // 建立物件
range.selectNode(textToCopy); // 設定範圍在指定節點
window.getSelection().removeAllRanges(); // 清除當前的選擇
window.getSelection().addRange(range); // 選擇文本
try {
const successful = document.execCommand('copy'); // 複製文本
const msg = successful ? '已複製到剪貼簿!' : '複製失敗!';
alert(msg);
} catch (err) {
console.error('複製失敗', err);
}
window.getSelection().removeAllRanges(); // 清除選擇
});
</script>
</body>
</html>
這兩行程式碼的用途是建立一個選擇範圍,用在選取指定的 DOM 節點的內容(在這裡是指 textToCopy
),以利進行「複製」。
const range = document.createRange();
:- 建立一個新的
Range
物件。Range
是一個文本中一段連續內容的物件,可以用來操作選擇的文本。
- 建立一個新的
range.selectNode(textToCopy);
:- 將建立的範圍設定為選擇整個
textToCopy
節點的內容。這表示range
現在包括了textToCopy
節點內的所有文本,並準備被選取。
- 將建立的範圍設定為選擇整個
Can I use
目前有支援這個語法的瀏覽器版本。
不過 MDN 文件不推薦使用此功能 ,詳下列與連結說明。
Document.execCommand()
已棄用: 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它,但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能,盡可能更新現有程式;請參考頁面底部的相容性表格來下決定。請注意:本功能可能隨時停止運作。
可能要改用 Clipboard API 來實作複製文字的功能了。