剪下及複製指令

Matt Gaunt
X 首頁

IE10 以上版本透過 Document.execCommand() 方法新增「cut」和「copy」指令支援。自 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() 之前，您應使用 document.queryCommandSupported() 方法支援這個 API。在上述範例中，我們可以根據支援設定按鈕停用的狀態，如下所示：

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

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

瀏覽器支援

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

Safari 不支援這些指令。

已知錯誤