文章摘要
白衣 DeepSeek

下面分享两种复制提示，这是之前在用Typecho博客的时候写的文章，可以给你的博客加上复制粘贴提示，也可以用作监听复制的尾随文本。

一.layer样式

1
2
3
4
<!-- 引入layer.js-->
<script src="https://cdn.staticfile.org/layer/3.1.1/layer.js"></script>
<!-- 复制提醒 -->
<script>document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接！');};</script>

二.sweetalert样式

1
2
3
4
5
6
7
8
9
<!-- 引入sweetalert2 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" />
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<!-- 复制提醒 -->
<script>
    document.body.oncopy = function() {
        swal("复制成功！", "白衣博客提醒您：若要转载请保留原文链接！", "success");
    };
</script>

个人推荐第一种，高端大气上档次；第二个是弹窗，感觉入侵感比较强，不如第一个顺眼。

三.尾随文本

下面将给出监听复制，并且强制随带上小尾巴，可以加入你的转载声明或者原文链接等等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    /** 监听copy事件 */
document.addEventListener("copy",function(e){
      //取消默认事件，才能修改复制的值
      e.preventDefault();
      //复制的内容
      var copyTxt = `${window.getSelection(0).toString()}\n————————————————\n原文链接：${window.location.href}\n白衣博客：https://baiyi.ink，如若转载请附上原文链接`;
      if(e.clipboardData) {
      e.clipboardData.setData('text/plain',  copyTxt);
      }
      else if(window.clipboardData){
        return window.clipboardData.setData("text", copyTxt);
      }
    })
</script>