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

最新推荐文章于 2023-09-11 20:22:55 发布

七块的学习笔记

最新推荐文章于 2023-09-11 20:22:55 发布

阅读量2.8k

点赞数 2

分类专栏：编程语言文章标签： html

编程语言专栏收录该内容

42 篇文章

订阅专栏

https://segmentfault.com/q/1010000003986612原文

大体思路：

答案区域监听copy事件，并阻止这个事件的默认行为。
获取选中的内容（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>

禁止复制

语法

element.oncopy = functionRef;

<html>
<head>
<title>oncopy示例演示</title>

<script>
  function log(txt)
  {
    document.getElementById("log").appendChild(document.createTextNode(txt + "\n"));
  }
</script>
</head>

<body>
<div οncοpy="log('复制被阻止!'); return false;">试着复制这句话!</div>

<h3>Log</h3>
<textarea rows="15" cols="80" id="log" readonly="true"></textarea>
</body>
</html>