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

阅读 4.9k
评论
    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.

        没有这个问题啊

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章