Home > Article > Backend Development > 在知乎复制的文本为什么会自带一些版权声明,这个功能是如何实现的?
比如说我复制的
123456
最后出现的是
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:stevenliuyi
链接:http://www.zhihu.com/question/20451870/answer/15168034
来源:知乎
123456
比如说我复制的
123456
最后出现的是
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:stevenliuyi
链接:http://www.zhihu.com/question/20451870/answer/15168034
来源:知乎
123456
答案区域监听copy
事件,并阻止这个事件的默认行为。
获取选中的内容(window.getSelection()
)加上版权信息,然后设置到剪切板(clipboardData.setData()
)。
<code class="html"> <meta charset="UTF-8"> <title>test</title> <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 + ''; 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> </code>
看了知乎的代码,大致也是这么实现的,但是还加入了一些其他的判断,比如如果答案设置了不能复制,则阻止copy
事件,并显示提示信息,如果复制的文本长度小于42的话,不会加上版权信息。
copy
事件可以参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/oncopy
http://codebits.glennjones.net/editing/setclipboarddata.htm
没有这个问题啊