網頁複製文字研究整理
常用這個功能，我都網路 Google 找解答，今天又去爬了一次，就順便整理一下。
以前常用寫法
前端開發：如何使用Javascript實現複製到剪貼簿的功能 - Astral Web 歐斯瑞有限公司
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function copyText() {
var node = document.getElementById("text");
if (document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(node);
range.select();
document.execCommand("copy");
alert("複製成功!");
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
alert("複製成功!");
} else {
alert('無法複製內容、瀏覽器不支援');
}
}
|
自動選取某個區域的文字 - OXXO.STUDIO
Clipboard API
How do I copy to the clipboard in JavaScript? - Stack Overflow，這篇有很多留實做方法，這邊有看到有人用到 HTML5 Clipboard API。
1
2
3
4
5
6
|
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);
});
|
注意，這邊不能在 console.log 下，因為會無效。(原因:Clipboard write was blocked due to lack of user activation.)，需要使用者操做才能有效。
Clipboard API 實做測試
Clipboard Test
復製圖片法
Unblocking clipboard access這篇有教，但先不研究。目前知道Firefox 貼上只能用在文字上面，圖片目前還不行。
Async Clipboard API Image Demo
相關 API 文件
Clipboard.writeText() - Web APIs | MDN 複製用的。
Permissions API - Web APIs | MDN，權限控制。
TextRange - Web APIs | MDN 以廢棄，不推薦使用
Selection - Web APIs | MDN，這個是框選用的API。仔細看發現還滿簡單的。
1
2
|
var selObj = window.getSelection();
var range = selObj.getRangeAt(0);
|