MENU

Typecho 简单实现点击复制

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

在文章中插入大量无意义代码一不美观,二不便复制,其实使用原生 js 即可实现点击复制。

复制静夜思

引入 JS

将下面的 js 代码放入 head 中,可通过主题设置,也可直接在 header.php 中添加。

<script>
    function __copy__innerText(id) {
        let target = document.createElement('pre');
        target.style.opacity = '0';
        target.textContent = document.querySelector('#' + id).textContent;
        document.body.appendChild(target);
        try {
            let range = document.createRange();
            range.selectNode(target);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            document.execCommand('copy');
            window.getSelection().removeAllRanges();
        } catch (e) {
            console.log('copy failed.');
        }
        document.body.removeChild(target);
        return false;
    }
</script>

添加内容和按钮

html 的形式将以下内容写入文章中,点击按钮,即可复制 textarea 中的内容。

!!!
<a href='#' class="btn btn-primary" onclick="return(__copy__innerText('__poetry'))">复制静夜思</a>
<textarea id="__poetry" style="display: none">
       静夜思
床前明月光,疑是地上霜。
举头望明月,低头思故乡。
</textarea>
!!!

不足

&nbsp; <br/> 等标签会被渲染,若代码中使用了这些字符,则无法正确复制。

最后编辑于: 2019 年 08 月 18 日
0:00