利用JavaScript给全站代码快添加一键复制按钮-路羽博客-第1张图片

利用JavaScript给全站代码快添加一键复制按钮

利用JavaScript给全站代码快添加一键复制按钮-路羽博客-第2张图片

作者: 路羽

原创资源分享博客

利用JavaScript给全站代码快添加一键复制按钮-路羽博客-第3张图片微信小程序

路羽博客 资源分享

       

前言

利用JavaScript给全站代码快添加一键复制按钮

效果

利用JavaScript给全站代码快添加一键复制按钮-路羽博客-第4张图片

实现原理

  1. 遍历全文的pre标签,将其设置为相对定位relative 
  2. 创建一个复制按钮 document.createElement("button"),样式为绝对定位absolute到右上角【使用了子绝父相的定位】,点击按钮时将pre标签内code标签的innerText复制到剪贴板,同时按钮的innerHTML变为“复制成功”,1s后恢复为“复制”
  3. 将复制按钮添加到pre标签中  appendChild(copyButton)

代码一

以下代码加入全局js

[...document.getElementsByTagName("pre")].forEach(item => {
        item.style.position = "relative";
        let copyButton = document.createElement("button")
        copyButton.style.cssText = 'padding: 0px 5px;color: #ffffff;background-color: #0d6efd;border: 0;border-radius:4px;position:absolute;right:10px;top:10px;'
        copyButton.innerHTML = "复制";
        copyButton.onclick = function () {
            let copyData = item.firstChild.innerText
            copyToClipboard(copyData)
            copyButton.innerHTML = "复制成功";
            setTimeout(function() {
                copyButton.innerHTML = "复制";
            }, 1000);
        }
        item.appendChild(copyButton)
});
function copyToClipboard(content) {
    if (window.clipboardData) {
        window.clipboardData.setData('text', content);
    } else {
        (function (content) {
            document.oncopy = function (e) {
                e.clipboardData.setData('text', content);
                e.preventDefault();
                document.oncopy = null;
            }
        })(content);
        document.execCommand('Copy');
    }
}

代码二

当鼠标移到代码块,就显示复制按钮,离开就消失,此方法可用于简洁主题代码块的复制,见附件下载

文件下载

附件:代码块复制.txt

文件大小:1.9k

更新时间:2023-01-19

利用JavaScript给全站代码快添加一键复制按钮-路羽博客-第5张图片

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!

分享到:
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽博客
原文地址: 《利用JavaScript给全站代码快添加一键复制按钮》 发布于2023-1-19

评论

          
       
切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏