剪下及複製指令

Matt Gaunt
X 首頁

IE10 以上版本透過 Document.execCommand() 方法，新增了對「剪下」和「複製」指令的支援。自 Chrome 43 版起，Chrome 也支援這些指令。

執行上述任一指令時，在瀏覽器中選取的任何文字都會剪下或複製到使用者的剪貼簿。這樣一來，您就能為使用者提供簡單的方式，選取部分文字並複製到剪貼簿。

將此方法與 Selection API 結合使用，就能以程式輔助方式選取文字，進而決定要複製哪些內容到剪貼簿，我們會在本文稍後的部分進一步探討這項 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。由於「剪下」和「複製」指令在某些情況下可能會擲回錯誤，因此我們會在 try 和 catch 中包裝 execCommand()。

如要移除文字內容並透過剪貼簿存取，可以使用「剪下」指令。

在 HTML 中使用 textarea 和按鈕：

<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() 之前，請先使用 document.queryCommandSupported() 方法，確認系統支援此 API。在上述範例中，我們可以根據支援情況設定按鈕停用狀態，如下所示：

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

document.queryCommandSupported() 和 document.queryCommandEnabled() 的差異在於，瀏覽器可支援剪下和複製功能，但如果目前未選取任何文字，則不會啟用這兩項功能。在您未以程式設計方式設定文字選取範圍，但又想確保指令能正常運作，否則向使用者顯示訊息的情況下，這項功能就很實用。

瀏覽器支援

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

Safari 不支援這些指令。

已知錯誤