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');
}
});
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 不支援這些指令。