web剪贴板copyout操作总结

最近在做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');
                
};