[Typecho 优化]Typecho 简单实现点击复制
==意思就是,显示一个按钮,然后你点击按钮复制隐藏内容,下面放个例子==
这里主要说和我同主题的操作
引入 JS
依次进入 [tag type="default" outline]控制台 - 外观 - 设置外观 - 主题自定义扩展,[/tag]将以下代码加入到 [tag type="default" outline]自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后),[/tag]也可直接加入到主题对应的 [tag type="default" outline]header.php[/tag] 中的[tag type="default" outline] 标签[/tag]前。
[collapse title="JS代码"]
<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>
[/collapse]
如果你开启了[tag type="default" outline] PJAX,[/tag]可能需要单独加入回调函数。对于本主题,依次进入 [tag type="default" outline]控制台 - 外观 - 设置外观 - PJAX(BETA) - PJAX RELOAD,[/tag]
将initCopyButton();
添加进入即可。
添加按钮
以[tag type="default" outline] html[/tag] 形式将以下内容写入文章中,即可创建复制按钮。
[collapse title="HTML代码"]
!!!
<cp name="复制静夜思" text="
静夜思
床前明月光,疑是地上霜。
举头望明月,低头思故乡。
"></cp>
!!!
[/collapse]
注意事项
我这个主题如果显示复制成功,但是粘贴是空的,解决办法如下:
- 改 35 行,把
const target = document.createElement('pre');
改成const target = document.createElement('textarea');
也就是pre
改成textarea
转自LOGIhttps://logi.im/blog/copy-on-btn-click-in-typecho.html
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »