（轉）實現JS復制、粘貼，Chrome/Firefox下可用

背景：

      最近一直在做一個Web Excel項目，其中一項功能一直很糾結，就是數據的復制粘貼功能。功能要求：可以把Web端數據粘貼到Excel中，也可以從Excel中直接粘貼數據到頁面編輯器中。支持Button粘貼和Ctrl+C/Ctrl+V快捷鍵復制粘貼。

      本以為這個功能會很簡單，但是查了很多資料，用JS操作粘貼板IE下很好用，直接支持一個window.clipboardData對象，通過這個對象可以訪問到粘貼板中內容。但是chrome和firefox支持不是很好。Chrome和firefox為什么不支持有點難以理解，為了保護系統，免受外來侵害？

在網上搜了很多資料，但是大部分資料都是介紹在IE下使用window.clipboardData對象訪問粘貼板實現Copy和paste，但是單獨只為IE開發一個復制、粘貼功能，非常不實用；

當然網上還有其他方法，比如通過Flash的間接方式操作OS粘貼板，雖然有這類插件，但是也很不好用，只能用戶點擊復制按鈕才行，而且也不靈活。

后來想了想，很多頁面都是禁止copy的，那么通過瀏覽器事件，是不是可以訪問到粘貼板？查了下資料，IE/Chrome/Firefox都支持oncopy/onpaste/oncut事件，雖然不是在

所有元素上都支持。但是這里通過事件的event應該可以訪問到用戶復制了什么內容，並修改Data。動手實驗了下，通過console.debug查看chrome和firefox的event對象，會發現

event里面有一個clipboardData對象，所以后面的事情就不難了。看如下Firefox的截圖就知道了：

雖然Chrome和Firefox下可以通過event獲取clipboardData對象，但是要注意在IE下面，copy和paste事件的event對象是沒有這個對象的，所以還需要通過window來獲取clipboardData，最終代碼如下：

 

    //綁定在了body上，也可以綁定在其他可用元素行，但是不是所有元素都支持copy和past事件。  
    $(document.body).bind({  
        copy: function(e) {//copy事件  
            var cpTxt = "復制的數據";  
            var clipboardData = window.clipboardData; //for IE  
            if (!clipboardData) { // for chrome  
                clipboardData = e.originalEvent.clipboardData;  
            }  
            //e.clipboardData.getData('text');//可以獲取用戶選中復制的數據  
            clipboardData.setData('Text', cpTxt);  
            alert(cpTxt);  
            $('#message').text('Copy Data : ' + cpTxt);  
            return false;//否則設不生效  
        },paste: function(e) {//paste事件  
            var eve = e.originalEvent  
            var cp = eve.clipboardData;  
            var data = null;  
            var clipboardData = window.clipboardData; // IE  
            if (!clipboardData) { //chrome  
                clipboardData = e.originalEvent.clipboardData  
            }  
            data = clipboardData.getData('Text');  
            $('#message').html(data);  
        }  
    });  

 

通過clipboardData的getData和setData方法就可以和粘貼板交互了。而且要注意的是getData和setData只接受Text和Url兩個控制參數，一般用Text參數就夠了。

好了，上面可以“控制”粘貼板數據，接下來就是解析從Excel中“獲得”的數據了。( ^_^ )

 

 

來源：http://blog.csdn.net/hackersaillen/article/details/45694181