在過去想要用 JavaScript 操作剪貼簿進行複製、貼上的動作十分麻煩，之前在開發 NTUST.ME 臺科短網址時，為了方便大家複製縮短後的網址，特別研究了 JavaScript 對剪貼簿操作的 API，發現在較新版的瀏覽器，其實有一個 execCommand 可以進行許多方便的文字操作，例如複製、全選等等，以下就讓我來介紹一下吧！
猜測因為安全因素，目前不能從剪貼簿存取文字，也就是貼上功能，只能把資料塞進剪貼簿（複製）。
瀏覽器相容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
copy/cut |
43 | ? | 41 (41) | 9 | 29 | 10 |
範例程式碼
// Native JS Version
function copy(s) {
var clip_area = document.createElement('textarea');
clip_area.textContent = s;
document.body.appendChild(clip_area);
clip_area.select();
document.execCommand('copy');
clip_area.remove();
}
//jQuery Version
function copy(s) {
$('body').append('<textarea id="clip_area"></textarea>');
var clip_area = $('#clip_area');
clip_area.text(s);
clip_area.select();
document.execCommand('copy');
clip_area.remove();
}
程式碼說明
document.execCommand 是由瀏覽器提供的文字編輯 API，除了這邊所使用的複製外，也可以在 Textarea 裡面製造粗體、斜體、超連結等文字。
這邊的作法，先建立一個 Textarea 元素，把你要複製的文字填進去後全選，然後執行 document.execCommand(‘copy’) 來複製文字，最後把 Textarea 元素移除，因為速度很快所以幾乎感覺不到 Textarea 的存在。 注意不能把 Textarea 隱藏起來，否則會無法複製文字！