大体思路:
答案区域监听copy事件,并阻止这个事件的默认行为。
获取选中的内容(window.getSelection())加上版权信息,然后设置到剪切板(clipboardData.setData())。
下面的代码实现了一个简单的DEMO
testfunction setClipboardText(event){
event.preventDefault();
var node = document.createElement('div');
//对documentfragment不熟,不知道怎么获取里面的内容,用了一个比较笨的方式
node.appendChild(window.getSelection().getRangeAt(0).cloneContents());
var htmlData = '
'
+ '商业转载请联系作者获得授权,非商业转载请注明出处。
'
+ '作者:tiantian
链接:http://segmentfault.com/u/tiantian_
'
+ '来源:segmentfault
'
+ 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);
});
看了知乎的代码,大致也是这么实现的,但是还加入了一些其他的判断,比如如果答案设置了不能复制,则阻止copy事件,并显示提示信息,如果复制的文本长度小于42的话,不会加上版权信息。
copy事件可以参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/oncopy
http://codebits.glennjones.net/editing/setclipboarddata.htm