实现思路:
- 答案区域监听copy事件,并阻止这个事件的默认行为。
- 获取选中的内容window.getSelection()后加上版权信息,然后设置到剪切板clipboardData.setData()。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <div id="copyText">我是一段即将被复制的话<b>test</b></div> <script> function setClipboardText(e){ e.preventDefault(); var node = document.getElementById('#copyText'); var htmlData = '<div>著作权归作者所有。<br />' + '商业转载请联系作者获得授权,非商业转载请注明出处。<br />' + '作者:shengyu <br/>链接:https://shengyur.github.io/<br />' + node.innerHTML + '</div>'; var textData = '著作权归作者所有。\n' + '商业转载请联系作者获得授权,非商业转载请注明出处。\n' + '作者:shengyu \n链接:https://shengyur.github.io/ \n' + window.getSelection().getRangeAt(0); if(e.clipboardData){ e.clipboardData.setData("text/html", htmlData); e.clipboardData.setData("text/plain",textData); } else if(window.clipboardData){ return window.clipboardData.setData("text", textData); } }; var answer = document.getElementById("answer"); answer.addEventListener('copy',function(e){ setClipboardText(e); }); </script>
|
备注:
- 如果是复制到纯文本编辑器,就使用clipboardData.setData(“text/plain”,textData)方法,比如记事本,就没必要保存标签,反正也没啥样式,但是如果是复制到富文本编辑器(clipboardData.setData(“text/html”, htmlData);),比如word,就有必要保留标签了。
- oncopy 事件在用户拷贝元素上的内容时触发。
- 有三种方式可以拷贝元素和内容:
- 按下 CTRL + C
- 在你的浏览器的 Edit(编辑) 菜单中选择 “Copy(复制)”
- 右键鼠标按钮,在上下文菜单中选择 “Copy(复制)” 命令。
参考:https://blog.csdn.net/sinat_23880167/article/details/79418505