想要ctrl+c\v在浏览器上进行复制和粘贴,可以!不过也有一定的限制。
主要是监听paste
事件和copy
事件。事件handler函数中的event
对象可以获取到clipboardData
对象,通过此对象对系统的剪贴板进行操作。
window.addEventListener('copy',function(event){
event.clipboardData.setData('text/html','<img src="./copy_me.jpg">');
})
这样你的剪贴板中就放置了一段html代码,在浏览器上粘贴的时候一般text/html格式的数据会自动识别,浏览器会在你粘贴的地方插入一个<img>
。当然如果你的文档不可编辑,粘贴后也是不会出现图片的。
粘贴的时候,同样可以取得clipboardData
:
window.addEventListener('paste',function(event){
var htmlFragment = event.clipboardData.getData('text/html');
var div = document.createElement('div')
div.innerHTML = htmlFragment;
document.appentChild(div);
});
这样你ctrl+v的时候应该就可以看到一张图片了。
事情没这么简单
当然事情没这么简单。
首先
setData和getData只能设置字符串类数据(plain_Unicode64_string)。你想向clipboardData中放置一个<img>
或者一个js原生的对象字面量是不行的。
然后
浏览器兼容性问题。
最后
我要复制粘贴图片怎么办?你可以先试试,在一个网页中ctrl+c一个张图片,然后到任何其他地方(同一个网站的textarea,QQ的聊天界面,邮箱新邮件的编辑界面等等)去粘贴,看能不能粘出来。差异性是超乎你想象的。为什么呢?
有空再写。