剪下及複製指令

Matt Gaunt
X 首頁

IE10 以上版本支援「cut」和「複製」指令 Document.execCommand() 方法。自 Chrome 43 版起，Chrome 也支援這些指令。

執行上述任一指令時，在瀏覽器中選取的任何文字都會 剪下或複製到剪貼簿。讓使用者輕鬆 選取一段文字並複製到剪貼簿。

這個 API 與 Selection API 整合時非常實用， 程式輔助選取文字，決定要將哪些內容複製到剪貼簿 我們稍後會進一步說明

簡易範例

以清酒為例 我們加入一個按鈕，將電子郵件地址複製到 使用者的剪貼簿

我們會在 HTML 中加上電子郵件地址，並附上按鈕，以在點按後啟動複製功能：

<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p>

<p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

接著在 JavaScript 中，我們要在 從 js-emaillink 錨定選取電子郵件地址文字，然後執行副本 指令列會將該電子郵件地址放入使用者的剪貼簿 取消選取電子郵件地址，這樣使用者就不會看到這個選項。

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
    // Select the email link anchor text
    var emailLink = document.querySelector('.js-emaillink');
    var range = document.createRange();
    range.selectNode(emailLink);
    window.getSelection().addRange(range);

    try {
    // Now that we've selected the anchor text, execute the copy command
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to copy');
    }

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported
    window.getSelection().removeAllRanges();
});

這裡使用的是 Selection API 方法 window.getSelection() 透過程式輔助方式將「選擇」連至錨定標記的文字，也就是我們輸入的文字 將容器複製到使用者的剪貼簿呼叫 document.execCommand() 後 若要移除所選項目，請呼叫 window.getSelection().removeAllRanges()。 如要確認一切運作正常，可以檢查 document.execCommand(); 回應如果不是，則會傳回 false 支援或已啟用的我們將 execCommand() 包入嘗試中，擷取自「cut」 和「複製」指令可能會擲回錯誤 在某些情況下

「cut」指令可用於移除文字的文字欄位 並透過剪貼簿存取這些內容

在 HTML 中使用文字區域和按鈕：

<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>

<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>

我們可以採取下列行動來剪下內容：

var cutTextareaBtn = document.querySelector('.js-textareacutbtn');

cutTextareaBtn.addEventListener('click', function(event) {
    var cutTextarea = document.querySelector('.js-cuttextarea');
    cutTextarea.select();

    try {
    var successful = document.execCommand('cut');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Cutting text command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to cut');
    }
});

queryCommandSupported和queryCommandEnabled

在呼叫 document.execCommand() 之前，您應確保這個 API 支援使用 document.queryCommandSupported() 方法。在上述範例中，我們可以根據 例如：

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

預測與實際指標之間的差異 document.queryCommandSupported() 和 document.queryCommandEnabled() 你的瀏覽器可以支援剪下和複製功能，但如果目前未選取任何文字，就無法啟用。如果使用者不能 透過程式輔助方式設定文字選取作業 應用程式就會正常運作，否則會向使用者顯示訊息。

瀏覽器支援

IE 10+、Chrome 43+、Firefox 41+ 和 Opera 29 以上版本支援這些指令。

Safari 不支援這些指令。

已知錯誤