copy cut paste事件 重写clipboardData的值

##前言
需求是将表单页面的输入框内容粘贴到其他地方，自动清除其空格

##初始思路
window监听copy和cut事件，使用正则表达式将数据处理。
后来反思，这样做只考虑了复制内容为当前页面或者项目，如果从其他地方复制粘贴则无效。那么监听paste事件一定可以，不管从哪里复制的，paste就是入口，数据一定会经过这个事件的。

##copy或cut的代码实现 仅考虑文本类型
在生命周期函数componentDidMount中添加代码

 window.addEventListener('copy',this.handleCopyKey) 
  window.addEventListener('cut',this.handleCopryKey)  

  // copy文本的处理  去掉空格
     handleCopyKey = (e)=>{
         const selection = document.getSelection();
         e.preventDefault();  
         e.clipboardData.setData("Text",selection.toString().replace(/s+/g, ''))
     }

实现
在生命周期函数componentDidMount中添加代码

window.addEventListener('paste',this.handlePasteKey)

 handlePasteKey = (e)=>{
         e.preventDefault();
         e.clipboardData.setData("Text",selection.toString().replace(/s+/g, ''))
         var text;
         var clp = (e.originalEvent || e).clipboardData;
         var type=clp.items[0].type; // 可通过类型来进行粘贴文件的判断  【重点】
         //兼容针对于opera ie等浏览器
         if (clp === undefined || clp === null) {
             text = window.clipboardData.getData("text") || "";
             if (text !== "") {
                 if (window.getSelection) {
                     // 针对于ie11 10 9 safari
                     var newNode = document.createElement("span");
                     newNode.innerHTML = text; 
                     window.getSelection().getRangeAt(0).insertNode(newNode);
                 } else {
                     // 兼容ie10 9 8 7 6 5
                     document.selection.createRange().pasteHTML(text);
                 }
             }
         } else {
           if(type.match(/image/)){
             var blob = clp.items[0].getAsFile();
                 var file = new FileReader();
                 file.onload=function(){
                   document.execCommand('insertHTML', false, `<img src="${file.result}"></img>`);
                 }
                 file.readAsDataURL(blob);
           }else{
             //兼容chorme或hotfire
             text = clp.getData('text/plain') || "";
             if (text !== "") {
                 document.execCommand('insertText', false, text.replace(/s+/g, ''));
             }
           }
         }
     }

参考文档 https://blog.csdn.net/qq_37190789/article/details/119212187.

最后

以上就是无奈烧鹅为你收集整理的copy cut paste事件 重写clipboardData的值的全部内容，希望文章能够帮你解决copy cut paste事件 重写clipboardData的值所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。