最近在做eaas copy out的研究，簡單記錄一下。不同瀏覽器和版本對剪貼板的支持都不太一樣，需要分開討論。

Chrome & Firefox

ClipboardEvent 事件屬性clipboardData可以直接更改copy到剪貼板的內容,記得要取消事件默認行為（preventDefault）。

document.addEventListener('copy',function(e){
  e.preventDefault(); 
  e.clipboardData.setData('text/plain','cmc');
})

document.exeCommand 方法能直接觸發copy事件

document.exeCommand('copy')

目前測試結果是只能支持文本格式數據（text/plian, text/html)。

IE & Edge

IE和Edge上直接在window對象上提供了clipboardData，使用setData方法時，IE和Edge默認都會彈出系統提示框提示用戶允許訪問剪貼板。

window.clipboardData.setData('Text', 'cmc');

Safari

Safari 和IE&Edge一樣ClipboardEvent 事件屬性clipboardData不好使，需要自己將要選擇的內容放入臨時生成的texarea, 再執行exeCommand操作。下面這段代碼參考了clipboard.js的實現。

document.addEventListener('copy',function(e){
    e.preventDefault(); 
    e.clipboardData.setData('text/plain','cmc');
});
function startCopy(){
       function selectFake() {
            var isRTL = document.documentElement.getAttribute('dir') == 'rtl';
             var fakeElem = document.createElement('textarea');
              // Prevent zooming on iOS
              fakeElem.style.fontSize = '12pt';
              // Reset box model
              fakeElem.style.border = '0';
              fakeElem.style.padding = '0';
              fakeElem.style.margin = '0';
              // Move element out of screen horizontally
              fakeElem.style.position = 'absolute';
              fakeElem.style[ isRTL ? 'right' : 'left' ] = '-9999px';
              // Move element to the same position vertically
               var yPosition = window.pageYOffset || document.documentElement.scrollTop;
               fakeElem.style.top = yPosition + "px";

               fakeElem.setAttribute('readonly', '');
               fakeElem.value = 'test';
               $('body').append(fakeElem);
               fakeElem.select();
         }
         selectFake();
         document.execCommand('copy');
                
};