js修改ctrl+c、ctrl+v 剪貼板的內容,針對谷歌瀏覽器

最近開發可編輯表格,谷歌瀏覽器,單元格可以進行編輯,基於bootStrapTable,設置單元格contenteditable屬性,雙擊table加之insertRow等功能組合可編輯方案,後續有時間把整套方案發布博客。

問題:相鄰的單元格可編輯後,若複製了其他的兩個相鄰單元格內容,直接粘貼到可編輯表格,會導致row數據錯位,因複製過來的相鄰單元格數據是包含了tab製表符的,故影響了整個table的dom元素。

嘗試解決方案:ctrl+v監聽事件,即document.addEventListener('paste',function(e){});事件,然後使用e.clipboardData.getData(‘text’);獲取剪貼板內容,

然後使用e.clipboardData.setData('text', "已經處理過去除了tab製表符的複製內容")

但是發現,谷歌瀏覽器中:setData方法是無效的

最終解決方案:在ctrl+c事件發生時,即:copy事件發生時,進行setData是可以的

這就相當於,在還未真正發生copy事件前,把剪貼板內容自行設置爲過濾後的數據

document.addEventListener('copy', function(e) {
    e.preventDefault();//這句很重要,決定setData是否成功
    var textArr = window.getSelection().toString().split("\t");
    var pasteText = '';
    textArr.forEach(function(e){
        pasteText += e;
    });
    e.clipboardData.setData('text', pasteText);
});

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章