js實現攔截粘貼並修改粘貼內容

遇到這樣一個需求: 復制了excel表格的數據,然后粘貼的時候需要把表格里面的數據全部都用','分隔.
解決思路: 監聽粘貼事件,讀取粘貼的內容,把粘貼的內容里面的換行和tab都替換成',',然后獲取當前聚焦的元素,修改當前聚焦元素的value.
注意: 由於這些API都是比較新的,所以兼容性都不太好,請謹慎使用,或者try

    // 增加粘貼監聽
    addPasteListener() {
      document.addEventListener('paste', this.beforPasteHandler)
    },
    // 粘貼時把tab和換行替換成逗號
    beforPasteHandler(event) {
      let paste = (event.clipboardData || window.clipboardData).getData('text')
      paste = paste.replace(/(\r|\n|\t)/g, ',')
      paste = paste.replace(/(,,)/g, ',')
      if (paste.charAt(paste.length - 1) === ',') {
        paste = paste.substr(0, paste.length - 1)
      }
      // 寫入操作,這里寫的只是參考(實際上踩坑了,不能直接修改DOM,要修改虛擬DOM綁定的值才行,所以這里最好把時間綁定到需要用到組件,例如FormItem或者Input組件)
      //const selection = document.activeElement // 獲取當前焦點所在元素
      //if (!selection || selection.tagName.toUpperCase() === 'BODY') return false
      //selection.value = paste
      event.preventDefault()
    },
    // 移除離開頁面提示
    removePasteListener() {
      document.removeEventListener('paste', this.beforPasteHandler)
    }