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