前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简单实现点击复制

简单实现点击复制

作者头像
季春二九
发布2023-03-22 13:45:20
1.6K0
发布2023-03-22 13:45:20
举报
文章被收录于专栏:季春二九季春二九

在文章中插入大量无意义内容一不美观,二不便复制,不如使用 js 创建隐藏内容的复制按钮吧。

引入 JS

本主题:依次进入 控制台 - 外观 - 设置外观 - 主题自定义扩展,将以下代码加入到 自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后),其他主题直接加入到主题对应的 header.php 中的 标签前。

collapse title="JavaScript Code"

代码语言:javascript
复制
    // 创建隐藏内容的复制按钮
    document.addEventListener('DOMContentLoaded', initCopyButton);
    function initCopyButton() {
        const util = {
            newButton: function (cp) {
                cp.style.display = '0';
                let text = cp.getAttribute('text');
                text = text[0] === '\n' ? text.slice(1) : text;
                const button = document.createElement('a');
                button.href = '#'
                button.innerHTML = cp.getAttribute('name');
                button.className = 'btn btn-primary';
                button.onclick = () => {
                    const originName = button.innerHTML;
                    const actionResult = this.copy(text) ? '成功' : '失败';
                    button.innerHTML = '复制' + actionResult;
                    setTimeout(() => button.innerHTML = originName, 250);
                    return false;
                };
                cp.parentNode.insertBefore(button, cp);
            },
            copy: function (text) {
                let result = false;
                const target = document.createElement('pre');
                target.style.opacity = '0';
                target.textContent = text;
                document.body.appendChild(target);
                try {
                    const range = document.createRange();
                    range.selectNode(target);
                    window.getSelection().removeAllRanges();
                    window.getSelection().addRange(range);
                    document.execCommand('copy');
                    window.getSelection().removeAllRanges();
                    result = true;
                } catch (e) {
                    console.log('copy failed.');
                }
                document.body.removeChild(target);
                return result;
            }
        };
        document.querySelectorAll('cp').forEach(cp => util.newButton(cp));
    }

/collapse

如果你开启了 PJAX,可能需要单独加入回调函数。对于本主题,依次进入 控制台 - 外观 - 设置外观 - PJAX(BETA) - PJAX RELOAD,将 initCopyButton(); 添加进入即可。

使用方法:

代码语言:javascript
复制
!!!
    <cp name="复制静夜思" text="
           静夜思
    床前明月光,疑是地上霜。
    举头望明月,低头思故乡。
    "></cp>
!!!

如果你想在代码块的右上角添加复制按钮,请看 另一篇文章

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 引入 JS
  • 使用方法:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档