網頁複製文字研究整理

常用這個功能，我都網路 Google 找解答，今天又去爬了一次，就順便整理一下。

以前常用寫法

前端開發：如何使用Javascript實現複製到剪貼簿的功能 - Astral Web 歐斯瑞有限公司

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。

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。仔細看發現還滿簡單的。

var selObj = window.getSelection();
var range  = selObj.getRangeAt(0);