最近開發可編輯表格,谷歌瀏覽器,單元格可以進行編輯,基於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);
});