您的位置：首页 > 其它

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

2018-03-01 23:24 423 查看

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.g
9f98
etSelection().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 oncopy="log('复制被阻止!'); return false;">试着复制这句话!</div>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航