复制粘贴你真的会用么？— 给你的博文增加版权信息

今日想要给博客添加版权信息，不仅要在每一篇博文的最后增加，还有在博客内任一地方的复制功能上增加版权信息

oncopy 、onpaste、oncut事件

以上事件分别为复制、粘贴、剪切事件，这类事件会返回 ClipboardEvent 事件对象 。

MDNClipboardEvent

这是 MDN 官方的资料，paste事件我在之前我的编辑器里有提到 daiEditor—一键生成符合hexo框架markdown文件 ，经过我屡次测试setData()方法 chrome 是不兼容的。

那么要如何限制在博客内的复制功能，增加版权信息呢

屡次尝试之后，才注意到一个细节：
oncopy、oncut、onpaste事件的出发时间都是在实际 复制、剪切、 粘贴操作之前！之前！！之前！！！触发的重要的事情要讲三遍。

开发思路：那么想要在复制时追加自己的版权信息，只要要修改我们选中的内容就好了

第一步：浏览器增加copy事件，先获取最先选中的 html 格式的内容

window.addEventListener('copy', function(event) {        // 获取浏览器选中部分    const selection = window.getSelection();    // 获取选中范围 调用cloneContents()方法复制 DocumentFragment 对象，获取选中 html格式内容    const range = selection.getRangeAt(0);    const docFragment = range.cloneContents();    const hiddenBox = document.createElement('div');     hiddenBox.style.position='absolute';     hiddenBox.style.left='-99999px';         hiddenBox.appendChild(docFragment);        let copytext = hiddenBox.innerHTML;

第二步：增加版权信息

     // 增加版权信息后缀    copytext += `<br><br>    作者: 猫十一 <br>    链接：${location.href} <br>    来源：<a href="https://db324246.github.io/">猫十一の纸盒子</a> <br>    著作权归作者所有。商业转载请联络作者取得受权，非商业转载请注明出处。`;

第三部：增加一个隐藏的div，将修改的内容增加进去，再修改浏览器的选中内容即可以了

    // 增加隐藏的div 修改浏览器的选中内容 以供复制    var newdiv = document.createElement('div');     newdiv.style.position='absolute';     newdiv.style.left='-99999px';     document.body.appendChild(newdiv);     newdiv.innerHTML = copytext;     selection.selectAllChildren(newdiv);     window.setTimeout(function() {       document.body.removeChild(newdiv);     },0);}

这是我的博客【猫十一の纸盒子】，欢迎学习交流