想要ctrl+c\v在瀏覽器上進(jìn)行復(fù)制和粘貼,可以!不過也有一定的限制。
主要是監(jiān)聽paste事件和copy事件。事件handler函數(shù)中的event對(duì)象可以獲取到clipboardData對(duì)象,通過此對(duì)象對(duì)系統(tǒng)的剪貼板進(jìn)行操作。
window.addEventListener('copy',function(event){
event.clipboardData.setData('text/html','<img src="./copy_me.jpg">');
})
這樣你的剪貼板中就放置了一段html代碼,在瀏覽器上粘貼的時(shí)候一般text/html格式的數(shù)據(jù)會(huì)自動(dòng)識(shí)別,瀏覽器會(huì)在你粘貼的地方插入一個(gè)<img>。當(dāng)然如果你的文檔不可編輯,粘貼后也是不會(huì)出現(xiàn)圖片的。
粘貼的時(shí)候,同樣可以取得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的時(shí)候應(yīng)該就可以看到一張圖片了。
事情沒這么簡(jiǎn)單
當(dāng)然事情沒這么簡(jiǎn)單。
首先
setData和getData只能設(shè)置字符串類數(shù)據(jù)(plain_Unicode64_string)。你想向clipboardData中放置一個(gè)<img>或者一個(gè)js原生的對(duì)象字面量是不行的。
然后
瀏覽器兼容性問題。
最后
我要復(fù)制粘貼圖片怎么辦?你可以先試試,在一個(gè)網(wǎng)頁(yè)中ctrl+c一個(gè)張圖片,然后到任何其他地方(同一個(gè)網(wǎng)站的textarea,QQ的聊天界面,郵箱新郵件的編輯界面等等)去粘貼,看能不能粘出來(lái)。差異性是超乎你想象的。為什么呢?
有空再寫。