前言
利用JavaScript给全站代码快添加一键复制按钮
效果
实现原理
- 遍历全文的pre标签,将其设置为相对定位relative
- 创建一个复制按钮 document.createElement("button"),样式为绝对定位absolute到右上角【使用了子绝父相的定位】,点击按钮时将pre标签内code标签的innerText复制到剪贴板,同时按钮的innerHTML变为“复制成功”,1s后恢复为“复制”
- 将复制按钮添加到pre标签中 appendChild(copyButton)
代码一
以下代码加入全局js中
[...document.getElementsByTagName("pre")].forEach(item => {
item.style.position = "relative";
let copyButton = document.createElement("button")
copyButton.style.cssText = 'padding: 0px 5px;color: #ffffff;background-color: #0d6efd;border: 0;border-radius:4px;position:absolute;right:10px;top:10px;'
copyButton.innerHTML = "复制";
copyButton.onclick = function () {
let copyData = item.firstChild.innerText
copyToClipboard(copyData)
copyButton.innerHTML = "复制成功";
setTimeout(function() {
copyButton.innerHTML = "复制";
}, 1000);
}
item.appendChild(copyButton)
});
function copyToClipboard(content) {
if (window.clipboardData) {
window.clipboardData.setData('text', content);
} else {
(function (content) {
document.oncopy = function (e) {
e.clipboardData.setData('text', content);
e.preventDefault();
document.oncopy = null;
}
})(content);
document.execCommand('Copy');
}
}
代码二
当鼠标移到代码块,就显示复制按钮,离开就消失,此方法可用于简洁主题代码块的复制,见附件下载
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
未经允许不得转载:
作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽博客。
原文地址: 《利用JavaScript给全站代码快添加一键复制按钮》 发布于2023-1-19
评论