您的位置 首页 wordpress教程

wordpress站点通过JS代码实现一键复制指定内容

阿里云盘1TB免费空间

一、下载所需文件 一共包含两个文件:“clipboard.min.js”文件和 “fuzhi.css ”样式文…

一、下载所需文件

一共包含两个文件:“clipboard.min.js”文件和 “fuzhi.css ”样式文件

下载地址:点击下载

下载后解压,得到clipboard.min.js 和 fuzhi.css ,把两个文件上传到网站根目录。(我上传到的是相应主题的js文件夹)

二、引用 JS 与 css 文件

1、引用 js 库,在当前主题的 footer.php 模板的末尾添加以下代码
<script src="这里替换成您网站clipboard.min.js的路径网址" type="text/javascript"></script>
<script>
var clipboard = new Clipboard('.itemCopy');
clipboard.on('success',
function(e) {
if (e.trigger.disabled == false || e.trigger.disabled == undefined) {
e.trigger.innerHTML = "复制成功";
e.trigger.disabled = true;
setTimeout(function() {
e.trigger.innerHTML = "一键复制";
e.trigger.disabled = false;
},
2000);
}
});
clipboard.on('error',
function(e) {
e.trigger.innerHTML = "复制失败";
});
</script>

2、引用 css 样式,在当前主题的 header.php 模板添加以下代码
<link rel="stylesheet" href="这里替换成fuzhi.css 的路径网址">

三、文章中添加一键复制按钮

在编辑文章时,在需要的位置添加以下代码,就可以看到点击一键复制指定内容的按钮了。(采用html编辑模式,而不是可视化编辑!)

<button class="itemCopy red_tkl button_tkl" id="TKLS" type="button" data-clipboard-text="需要复制的内容">按钮显示的文字</button>

如果想要实现点击打开链接的同时,复制指定的内容,可以参考下方代码:

<button class="itemCopy red_tkl button_tkl" id="TKLS" type="button" data-clipboard-text="需要复制的内容"><a style="color: #ffffff;" href="需要打开的链接地址" onClick="copyUrl2()" target="_blank" rel="noopener noreferrer">按钮显示的文字</button>

补充说明:如果不需要我们提供的css样式,可以省略css操作的相关步骤。当然,您也可以使用自己修改喜欢的样式文件。

本文来自网络,不代表Shared Home立场,转载请注明出处:https://liumg.xyz/archives/389

office系列教程

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 646718478@qq.com

非诚勿扰,谢谢!
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部
//鼠标特效代码