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

今天老王有需求想实现点击一个按钮自动一键复制指定的内容，但是搜来搜去都是关于防止 WordPress 内容被复制的教程。后来找到一个通过 clipboard.js 实现利用 JS 代码一键复制指定内容的方法，适用于 WordPress，这里分享给大家。

一、下载一键复制 JS 库

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

二、引用 JS 库与 css 文件

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

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 = "复制失败";

});

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

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

一键复制

三、效果图

这里再分享下我的 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;

}

具体的效果可以查看：剁手部落