WordPress 通过 JS 代码实现点击按钮一键复制指定内容

zdgcc
zdgcc
zdgcc
173
文章
12
评论
2020年11月13日06:12:49
评论
WordPress 通过 JS 代码实现点击按钮一键复制指定内容

一、下载一键复制 JS 库

clipboard.js 是一个 Github 上的开源项目,可以实现纯 JavaScript 的浏览器内容复制到系统剪贴板的功能。

下载地址:https://files.flyzy2005.cn/?dir=%E5%BB%BA%E7%AB%99(clipboard.min.js)

二、引用 JS 库与 css 文件

将下载的 clipboard.min.js 上传到网站根目录,在 WordPress 的 footer.php 的末尾添加如下代码:

<script src="https://laowangblog.com/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>

其中,https://laowangblog.com/clipboard.min.js 换成你自己的 js 文件地址。

之后在文章中的某个需要复制的地方放一个按钮就可以了:

<button class="itemCopy red_tkl button_tkl" id="TKLS"  type="button" data-clipboard-text="需要复制的内容">一键复制</button>

三、效果图

这里再分享下我的 css:

.red_tkl {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
	background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red_tkl:hover {
	background: #b61318;
	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
	background: -moz-linear-gradient(top,  #c9151b,  #a11115);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red_tkl:active {
	color: #de898c;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
	background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

.button_tkl {
	display: inline-block;
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button_tkl:hover {
	text-decoration: none;
}
.button_tkl:active {
	position: relative;
	top: 1px;
}

zdgcc
  • 本文由 发表于 2020年11月13日06:12:49
  • 转载请务必保留本文链接:https://zhangdangao.com/45377.html
次元社网站维护 谈天说地

次元社网站维护

网站维护几天,先配置一下图床,图床升级出错,爆了一大堆错误需要一个个修复。 然后对接一下漫画,还有就是微信公众号对接什么的一大堆事,网站还需要删除部分无用数据以及更换部分静态资源,所以决定关站维护,毕...
使用宝塔的骑牛云插件快速备份网站 谈天说地

使用宝塔的骑牛云插件快速备份网站

骑牛云我3年前就注册过了,记得一直是送10G空间。还算是比较良心的地方,毕竟一直给你免费使用是不,后面慢慢没用了,前段时间想着备份一下网站数据刚好看到宝塔插件集成了,所以去试试 最大的问题其实就是域名...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: