2

比如说我复制的

123456

最后出现的是
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:stevenliuyi
链接:http://www.zhihu.com/question/20451870/answer/15168034
来源:知乎

123456

peanut 141
2015-11-12 提问
2 个回答
5

已采纳
大体思路:
  1. 答案区域监听copy事件,并阻止这个事件的默认行为。

  2. 获取选中的内容(window.getSelection())加上版权信息,然后设置到剪切板(clipboardData.setData())。

下面的代码实现了一个简单的DEMO
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div id="answer">测试数据<b>test</b></div>
    <script>
        function setClipboardText(event){ 
            event.preventDefault();
            var node = document.createElement('div');
            //对documentfragment不熟,不知道怎么获取里面的内容,用了一个比较笨的方式
            node.appendChild(window.getSelection().getRangeAt(0).cloneContents());
            var htmlData = '<div>著作权归作者所有。<br />' 
                            + '商业转载请联系作者获得授权,非商业转载请注明出处。<br />'
                            + '作者:tiantian<br />链接:http://segmentfault.com/u/tiantian_<br />'
                            + '来源:segmentfault<br /><br />' 
                            + node.innerHTML 
                            + '</div>';
            var textData = '著作权归作者所有。\n' 
                            + '商业转载请联系作者获得授权,非商业转载请注明出处。\n'
                            + '作者:tiantian\n链接:http://segmentfault.com/u/tiantian_\n'
                            + '来源:segmentfault\n\n' 
                            + window.getSelection().getRangeAt(0);
            if(event.clipboardData){  
                event.clipboardData.setData("text/html", htmlData); 
                event.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>
</body>
</html>

看了知乎的代码,大致也是这么实现的,但是还加入了一些其他的判断,比如如果答案设置了不能复制,则阻止copy事件,并显示提示信息,如果复制的文本长度小于42的话,不会加上版权信息。

copy事件可以参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/oncopy
http://codebits.glennjones.net/editing/setclipboarddata.htm

1
回复 杨佰

window.getSelection()的返回值是Object,这个对象的toString方法返回选择的纯文本不包含标签。比如选中的内容是:测试数据test,真正的html是测试数据<b>test</b>,如果直接写window.getSelection(),toString之后得到结果是: 测试数据test,没有<b>标签了,写window.getSelection().getRangeAt(0).cloneContents()主要是想保留标签。(现在还没找到其他的方法来实现)。
如果是复制到纯文本编辑器(clipboardData.setData("text/plain",textData)),比如记事本,就没必要保存标签了,反正也看不出来区别,但是如果是复制到富文本编辑器(clipboardData.setData("text/html", htmlData);)比如word,就有必要保留标签了。

tiantian · 2015年11月14日

展开评论
0

没有这个问题啊

撰写答案

你可能感兴趣的

推广链接