剪下及複製指令

Matt Gaunt

IE10 和以上版本透過 Document.execCommand() 方法新增「cut」和「copy」指令支援功能。自 Chrome 43 版起,這些指令也適用於 Chrome。

執行這些指令時,在瀏覽器中選取的任何文字都會剪輯或複製到使用者的剪貼簿。如此一來,使用者就能輕鬆選取一段文字,並複製到剪貼簿。

當您將其與 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()) 方法,透過程式輔助方式將文字的「Select」設為錨點 (也就是我們要複製到使用者剪貼簿的文字)。呼叫 document.execCommand() 後,我們可以呼叫 window.getSelection().removeAllRanges() 移除所選項目。如要確認一切運作正常,您可以檢查 document.execCommand() 的回應;如果不支援或啟用該指令,則會傳回 false。我們會在嘗試中納入 execCommand(),因為「cut」和「copy」指令在幾種情況下可能會擲回錯誤

'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');
    }
});

queryCommandSupportedqueryCommandEnabled

在呼叫 document.execCommand() 前,應確認使用 document.queryCommandSupported() 方法支援這個 API。在上述範例中,我們可以根據支援方式設定按鈕停用狀態,如下所示:

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

document.queryCommandSupported()document.queryCommandEnabled() 之間的差別在於瀏覽器支援剪下和複製功能,但如目前未選取任何文字,則無法啟用。如果您未透過程式輔助設定文字選取範圍,並想確保指令能正常運作,這樣的話,這個做法會很有用,否則會向使用者顯示訊息。

瀏覽器支援

IE 10+、Chrome 43+、Firefox 41+ 和 Opera 29+ 都支援這些指令。

Safari 不支援這些指令。

已知錯誤