JS 操作複製剪下粘貼

標籤：data   ...   query   簡單   代碼   .com   getattr   bsp   nbsp   

測試了很多次之後，雖然有點細碎的突破，但還是想說，麻辣隔壁...

 

眾所周知使用 oncut/oncopy/onpaste 監聽剪下板，採用 window.clipboardData 並不是適用於大多瀏覽器，

某天突然發現事件對象 e 中有個 clipboardData 屬性，也就是 e.originalEvent.clipboardData，於是才有了今天的嘗試，

然而，依舊問題重重呀...先看一段不太舒服的代碼。

$(‘.copy‘).on(‘beforecopy beforecut beforepaste copy cut paste‘, function(e){    var clipboardData  = window.clipboardData || e.originalEvent.clipboardData;    switch (e.type) {        case ‘copy‘:            clipboardData.setData(‘text‘, ‘複製我幹啥‘);            console.log(clipboardData.getData(‘text‘));            console.log(‘複製:‘+clipboardData.getData(‘text‘));            break;        case ‘beforecopy‘:            clipboardData.setData(‘text‘, ‘改個資料試試‘);            console.log(‘我就是在複製的前面，雖然並沒有卵用‘);            break;        case ‘cut‘:            clipboardData.setData(‘text‘, ‘剪下我幹啥‘);            console.log(‘剪下:‘+clipboardData.getData(‘text‘));            break;        case ‘paste‘:            clipboardData.setData(‘text‘, ‘粘貼我複製還有用嗎‘);            console.log(‘粘貼:‘+clipboardData.getData(‘text‘));            break;    }});

顯然這個操作很不友好，跟玩兒似的，

copy 或 beforecopy 時 setData 了新的內容，對 paste 並不會產生任何影響，

能夠在粘貼時對複製的文本進行一定的操作，但顯然也只是能在本網頁而已，

再者，copy 和 cut 時 getData 是為空白的，Firefox不支援 beforecopy 方法等...好吧，這特麼太雞肋了。

 

而對於當年流行的 zeroclipboard.swf 到了今日卻不得不放棄了，畢竟屏蔽 flash 小程式的瀏覽器越來越多。

再後來我就找到了 clipboard.js 這個外掛程式，雖然只有點擊才會生效，但我已然是知足的了。

<div class="box">    <textarea id="bar">複製點啥好呢</textarea>    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">Copy</button></div><div class="box">    <button class="btn2" data-clipboard-text="你猜我複製了什麼">Copy</button></div>

<script src="http://cdn.bootcss.com/clipboard.js/1.5.12/clipboard.min.js"></script><script>var x = new Clipboard(‘.btn‘, {　　text: function(trigger) {　　　　return document.querySelector(trigger.getAttribute(‘data-clipboard-target‘)).value + ‘\n\n\n複製來源於部落格園‘;　　}});x.on(‘success‘, function(e){    // e 擁有三個屬性,     // action: 類型(‘copy‘|‘cut‘)     // text: 值(‘cut‘時有點小問題)     // trigger: dom元素    console.log(e);});x.on(‘error‘, function(e){    console.log(e);});var xx = new Clipboard(‘.btn2‘);</script>

應該還是很好理解的吧，不然那還是看官網吧。

 

原理好像很簡單的樣子，主要靠 getSelection 和 createRange 這類東西，

以後再開一章研究下這種複製粘貼的事件啟動問題，以及粘貼時自訂化，blabla...

JS 操作複製剪下粘貼