MENU

Typecho 简单实现点击复制

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

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

引入 JS

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

JavaScript Code

<script>
  // 创建隐藏内容的复制按钮
  document.addEventListener("DOMContentLoaded", initCopyButton);
  function initCopyButton() {
    const copyButton = {
      load() {
        document.querySelectorAll("cp").forEach((cp) => this.newButton(cp));
      },
      newButton(cp) {
        const lock = "lock";
        if (cp.getAttribute(lock)) return;
        cp.setAttribute(lock, true);
        cp.style.display = "0";
        let text = cp.getAttribute("text");
        text = text[0] === "\n" ? text.slice(1) : text;
        const button = document.createElement("a");
        button.href = "javascript:void(0);";
        button.innerHTML = cp.getAttribute("name");
        button.className = "btn btn-primary";
        button.style.textAlign = "center";
        button.setAttribute("onclick", "__miragesCustomCopyButtonListener(this)");
        window.__miragesCustomCopyButtonListener = (button) => {
          const lock = "lock";
          if (button.getAttribute(lock)) return;
          button.setAttribute(lock, true);
          const originName = button.innerHTML;
          const actionResult = this.copy(text) ? "成功" : "失败";
          button.innerHTML = "复制" + actionResult;
          setTimeout(() => {
            button.innerHTML = originName;
            button.removeAttribute(lock);
          }, 250);
          return false;
        };
        cp.parentNode.insertBefore(button, cp);
        setTimeout(() => (button.style.width = button.getBoundingClientRect().width + "px"), 100);
      },
      copy(text) {
        let result = false;
        const wrapper = document.createElement("div");
        const target = document.createElement("pre");
        target.textContent = text;
        wrapper.style.opacity = "0";
        wrapper.appendChild(target);
        document.body.appendChild(wrapper);
        try {
          const range = document.createRange();
          range.selectNodeContents(target);
          const selection = window.getSelection();
          selection.removeAllRanges();
          selection.addRange(range);
          document.execCommand("copy", false, text);
          selection.removeAllRanges();
          result = true;
        } catch (e) {
          console.log("copy failed.");
        }
        document.body.removeChild(wrapper);
        return result;
      },
    };
    copyButton.load();
  }
</script>

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

添加按钮

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

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

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

TG 大佬群 QQ 大佬群

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

Loading captcha...

已有 17 条评论
  1. niuniu niuniu   Windows 10 x64 Edition  Google Chrome 108.0.0.0

    7.10.5.DEV4版本用上后·点击复制按钮会跳转到文章顶部。

    1. LOGI LOGI   Windows 10 x64 Edition  Google Chrome 110.0.0.0

      @niuniu把11行删掉试试

    2. LOGI LOGI   Windows 10 x64 Edition  Google Chrome 110.0.0.0

      @niuniu代码已更新

    3. niuniu niuniu   Windows 10 x64 Edition  Google Chrome 108.0.0.0

      @LOGI更新了代码还是会跳转到文章顶部,而且好像失效了。之前能成功复制的。

    4. LOGI LOGI   Windows 10 x64 Edition  Google Chrome 110.0.0.0

      @niuniu现在应该行了

    5. niuniu niuniu   Mac OS X 10.15.7  Google Chrome 110.0.0.0

      @LOGI已经可以使用了。非常感谢大佬。::quyin:laughing::

  2. 乔治 乔治   Windows 10 x64 Edition  Google Chrome 88.0.4324.150

    大佬,可以复制,但是复制内容为空,且没有弹窗提醒。浏览器edge,你的可以复制且有内容。可以帮忙看下么?

  3. ZGGSONG ZGGSONG   Windows 10 x64 Edition  Google Chrome 84.0.4147.89

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

    ![](https://cdn.jsdelivr.net/gh/zggsong/cdn/blog/copy.png)

  4. 团子酱 团子酱   Windows 10 x64 Edition  QQ 浏览器 10.5.3863.400

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

    1. LOGI LOGI   Android 9  Google Chrome 79.0.3945.136

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

    2. 团子酱 团子酱   Windows 10 x64 Edition  QQ 浏览器 10.5.3863.400

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

    3. 团子酱 团子酱   Windows 10 x64 Edition  QQ 浏览器 10.5.3863.400

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

    4. 团子酱 团子酱   Windows 10 x64 Edition  QQ 浏览器 10.5.3863.400

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

    5. LOGI LOGI   Android 9  Google Chrome 79.0.3945.136

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

    6. 团子 团子   Windows 10 x64 Edition  Google Chrome 80.0.3987.87

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

  5. 团子酱 团子酱   Windows 10 x64 Edition  QQ 浏览器 10.5.3863.400

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

  6. 团子酱 团子酱   Windows 10 x64 Edition  QQ 浏览器 10.5.3863.400

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