统计
  • 文章总数:20 篇
  • 评论总数:0 条
  • 分类总数:23 个
  • 最后更新:6天前

用js给博客代码块添加复制按钮的实现方法

本文阅读 1 分钟
本文最后更新于2022年11月30日,已超过8天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

通过一个js完成
很简单且很实用

步骤一: 新建codecopy.js
在主题文件夹js里面新建一个codecopy.js文件。在文件里放入以下代码:

var codeblocks = document.getElementsByTagName("pre")
//循环每个pre代码块,并添加 复制代码
for (var i = 0; i < codeblocks.length; i++) {
    //显示 复制代码 按钮
    currentCode = codeblocks[i]
    currentCode.style = "position: relative;"
    var copy = document.createElement("div")
    copy.style = "position: absolute;right: 4px;\
    top: 4px;background-color: white;padding: 2px 8px;\
    margin: 8px;border-radius: 4px;cursor: pointer;\
    z-index: 9999;\
    box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05);"
    copy.innerHTML = "复制"
    currentCode.appendChild(copy)
    //让所有 "复制"按钮 全部隐藏
    copy.style.visibility = "hidden"
}

for (var i = 0; i < codeblocks.length; i++) {
    !function (i) {
        //鼠标移到代码块,就显示按钮
        codeblocks[i].onmouseover = function () {
            codeblocks[i].childNodes[1].style.visibility = "visible"
        }

        //执行 复制代码 功能
        function copyArticle(event) {
            const range = document.createRange();

            //范围是 code,不包括刚才创建的div
            range.selectNode(codeblocks[i].childNodes[0]);

            const selection = window.getSelection();
            if (selection.rangeCount > 0) selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand('copy');

            codeblocks[i].childNodes[1].innerHTML = "复制成功"
            setTimeout(function () {
                codeblocks[i].childNodes[1].innerHTML = "复制"
            }, 1000);
            //清除选择区
            if (selection.rangeCount > 0) selection.removeAllRanges(); 0
        }
        codeblocks[i].childNodes[1].addEventListener('click', copyArticle, false);

    }(i);

    !function (i) {
        //鼠标从代码块移开 则不显示复制代码按钮
        codeblocks[i].onmouseout = function () {
            codeblocks[i].childNodes[1].style.visibility = "hidden"
        }
    }(i);
}

步骤二 :应用codecopy.js
打开模板目录下的footer.php文件,在文件末尾的前添加下面一行。

<script src="<?php $this->options->themeUrl(); ?>js/codecopy.js"></script>

大功告成,非常适用,待研究出来复制弹窗结合使用,绝绝子

原创文章,作者:苏晨,如若转载,请注明出处:https://blog.sxchl.cn/50.html
-- 展开阅读全文 --
文章版权声明 1、本网站名称:友晨科技
2、本站永久网址:www.youchen.club。本博客文章如若转载,请注明出处。
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ528609062进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们,我们会第一时间更新。
一串代码让字闪起来
« 上一篇 07-17
给网站顶部添加一个滚动条位置百分比教程
下一篇 » 07-17

发表评论

发表评论

作者信息

现在时间

动态快讯

    请配置好页面缩略名选项

热门文章

最多点赞

标签TAG

热评文章

最近回复