MENU

Typecho 简单实现点击复制

2019 年 05 月 30 日 • 阅读: 1797 • 博客

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

引入 JS

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

JavaScript Code

<script>
    // 创建隐藏内容的复制按钮
    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));
    }
</script>

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

添加按钮

html 形式将以下内容写入文章中,即可创建复制按钮。

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

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

TG 大佬群 QQ 大佬群 QQ 追番群

最后编辑于: 2019 年 12 月 22 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码
添加新评论

已有 10 条评论
  1. ZGGSONG ZGGSONG     Windows 10 /    Google Chrome

    老哥,我直接用你的代码,但是在edge浏览器复制内容就会变成空呢,但是你的网站用edge浏览器点击复制还是可以的呀@(泪)
    就像这样:

  2. 团子酱 团子酱     Windows 10 /    QQ浏览器

    不对应该是只有火狐浏览器是好的,谷歌也不行

    1. LOGI LOGI     Android Pie /    Google Chrome

      @团子酱你可以试试我的行不行

    2. 团子酱 团子酱     Windows 10 /    QQ浏览器

      @LOGI你没问题,为啥,,,

    3. 团子酱 团子酱     Windows 10 /    QQ浏览器

      @LOGI你试试我的复制后有内容吗

    4. 团子酱 团子酱     Windows 10 /    QQ浏览器

      @LOGI你去我的复制试试有内容吗

    5. LOGI LOGI     Android Pie /    Google Chrome

      @团子酱安卓chrome有,不过你可以f12看一下有没有错误,你的页尾出现了无关注释,可能哪里没复制全

    6. 团子 团子     Windows 10 /    Google Chrome

      @LOGI那个注释删了,算了可能是我的问题,你那边都可以复制到内容对吧,那就行

  3. 团子酱 团子酱     Windows 10 /    QQ浏览器

    我发现就qq浏览器不行,可能我还没刷新

  4. 团子酱 团子酱     Windows 10 /    QQ浏览器

    你看你看我的文章,我和你一样的为啥点击复制是空白,我也回调了函数

0:00