实现思路：

  1. 答案区域监听copy事件，并阻止这个事件的默认行为。
  2. 获取选中的内容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 事件在用户拷贝元素上的内容时触发。
  • 有三种方式可以拷贝元素和内容：
    1. 按下 CTRL + C
    2. 在你的浏览器的 Edit(编辑) 菜单中选择 “Copy（复制）”
    3. 右键鼠标按钮，在上下文菜单中选择 “Copy（复制）” 命令。

参考：https://blog.csdn.net/sinat_23880167/article/details/79418505