比如说我复制的
123456
最后出现的是
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:stevenliuyi
链接:http://www.zhihu.com/question/20451870/answer/15168034
来源:知乎
123456
比如说我复制的
123456
最后出现的是
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:stevenliuyi
链接:http://www.zhihu.com/question/20451870/answer/15168034
来源:知乎
123456
直接贴代码吧,兼容各种浏览器,还解决了换行问题~
<script language="javascript" type="text/javascript">
jQuery(document).on('copy', function(e)
{
var selected = window.getSelection();
var selectedText = selected.toString().replace(/\n/g, '<br>'); // Solve the line breaks conversion issue
var copyFooter = '<br>---------------------<br>著作权归作者所有。<br>'
+ '商业转载请联系作者获得授权,非商业转载请注明出处。<br>'
+ '作者:Bravo Yeung<br> 源地址:' + document.location.href
+ '<br>来源:博客园cnblogs<br>© 版权声明:本文为博主原创文章,转载请附上博文链接!';
var copyHolder = $('<div>', {id: 'temp', html: selectedText + copyFooter, style: {position: 'absolute', left: '-99999px'}});
$('body').append(copyHolder);
selected.selectAllChildren( copyHolder[0] );
window.setTimeout(function() {
copyHolder.remove();
},0);
});
</script>
顺手测了一下csdn
的手动复制功能(非代码上方"复制按钮"),果然换行失败:
首发于本文博客园博客:
前端小白也能快速学会的博客园博客美化全攻略_附源码 - Enjoy233 - 博客园.
知乎上复制回答,剪贴板里自动加上版权出处的技术js如何实现? - 知乎
How do I copy to the clipboard in JavaScript? - Stack Overflow.
4 回答13.3k 阅读✓ 已解决
5 回答8k 阅读✓ 已解决
5 回答7.7k 阅读✓ 已解决
4 回答11.1k 阅读
3 回答1.8k 阅读✓ 已解决
3 回答4k 阅读✓ 已解决
2 回答1.8k 阅读✓ 已解决
大体思路:
答案区域监听
copy
事件,并阻止这个事件的默认行为。获取选中的内容(
window.getSelection()
)加上版权信息,然后设置到剪切板(clipboardData.setData()
)。下面的代码实现了一个简单的DEMO
看了知乎的代码,大致也是这么实现的,但是还加入了一些其他的判断,比如如果答案设置了不能复制,则阻止
copy
事件,并显示提示信息,如果复制的文本长度小于42的话,不会加上版权信息。copy
事件可以参考:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/oncopy
http://codebits.glennjones.net/editing/setclipboarddata.htm