在知乎复制的文本为什么会自带一些版权声明，这个功能如何实现？实现代码教程
程序员文章站
2022-03-03 22:46:37
大体思路：
答案区域监听copy事件，并阻止这个事件的默认行为。
获取选中的内容(window.getSelection())加上版权信息，然后设置到剪切板(clipboard...
大体思路：
答案区域监听copy事件，并阻止这个事件的默认行为。
获取选中的内容(window.getSelection())加上版权信息，然后设置到剪切板(clipboardData.setData())。
一个简单的DEMO 测试发现点击信息就有了，非复制就实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p id="answer">测试数据<b>test</b></p>
<script>
function setClipboardText(event){
event.preventDefault();
var node = document.createElement('p');
//对documentfragment不熟，不知道怎么获取里面的内容，用了一个比较笨的方式
node.appendChild(window.getSelection().getRangeAt(0).cloneContents());
var htmlData = '<p>著作权归作者所有。<br />'
+ '商业转载请联系作者获得授权，非商业转载请注明出处。<br />'
+ '作者：tiantian<br />链接：https://segmentfault.com/u/tiantian_<br />'
+ '来源：segmentfault<br /><br />'
+ node.innerHTML
+ '</p>';
var textData = '著作权归作者所有。\n'
+ '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
+ '作者：tiantian\n链接：https://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>
<p oncopy="log('复制被阻止!'); return false;">试着复制这句话!</p>
<h3>Log</h3>
<textarea rows="15" cols="80" id="log" readonly="true"></textarea>
</body>
</html>