瀏覽器上的復(fù)制粘貼方案

想要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)。差異性是超乎你想象的。為什么呢?

有空再寫。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Ubuntu的發(fā)音 Ubuntu,源于非洲祖魯人和科薩人的語(yǔ)言,發(fā)作 oo-boon-too 的音。了解發(fā)音是有意...
    螢火蟲de夢(mèng)閱讀 100,702評(píng)論 9 468
  • 他們很和諧,與以往我見過的每一對(duì)情侶一樣甜蜜。 天氣熱,其中一位小心試試保溫壺里的水:“冰的”,才遞給另外一個(gè);他...
    婷婷在想什么閱讀 4,431評(píng)論 22 14
  • 我是你生命的延續(xù),也是你用偉大續(xù)寫的詩(shī),承載著你所有的夢(mèng)想,寄托著你所有美好的愿望。歲月匆匆,只愿你美好如初。 她...
    沒故事的我閱讀 824評(píng)論 0 0
  • 多看幾眼 由于社會(huì)生活的復(fù)雜性,我們?cè)阼b人鑒物處世擇道中,為了盡可能地避免由于主觀輕信或先入為主從而造成判斷失誤的...
    仁者愛山閱讀 941評(píng)論 3 2

友情鏈接更多精彩內(nèi)容