在知乎复制的文本为什么会自带一些版权声明,这个功能是如何实现的?

阅读 9.8k
3 个回答
大体思路:
  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

直接贴代码吧,兼容各种浏览器,还解决了换行问题~

<script language="javascript" type="text/javascript">
jQuery(document).on('copy', function(e)
    {
      var selected = window.getSelection();
      var selectedText = selected.toString().replace(/\n/g, '<br>');  // Solve the line breaks conversion issue
      var copyFooter = '<br>---------------------<br>著作权归作者所有。<br>' 
                            + '商业转载请联系作者获得授权,非商业转载请注明出处。<br>'
                            + '作者:Bravo Yeung<br> 源地址:' + document.location.href
                            + '<br>来源:博客园cnblogs<br>© 版权声明:本文为博主原创文章,转载请附上博文链接!';
      var copyHolder = $('<div>', {id: 'temp', html: selectedText + copyFooter, style: {position: 'absolute', left: '-99999px'}});
        
      $('body').append(copyHolder);
      selected.selectAllChildren( copyHolder[0] );
      window.setTimeout(function() {
          copyHolder.remove();
      },0);
    });
</script>

顺手测了一下csdn的手动复制功能(非代码上方"复制按钮"),果然换行失败:

clipboard.png

首发于本文博客园博客:
前端小白也能快速学会的博客园博客美化全攻略_附源码 - Enjoy233 - 博客园.

知乎上复制回答,剪贴板里自动加上版权出处的技术js如何实现? - 知乎

How do I copy to the clipboard in JavaScript? - Stack Overflow.

没有这个问题啊

推荐问题
宣传栏