如果我們用過clipboard.js的朋友應該知道，這個JS腳本是用來實現(xiàn)點擊復制內(nèi)容的功能。如果我們需要將WordPress指定的內(nèi)容實現(xiàn)點擊復制，那如何操作呢？這里整理到一個方法案例，如果有需要可以參考。

1、引用JS庫

<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>

我們需要先到網(wǎng)上下載clipboard.min.js庫然后在代碼里引用。這個JS代碼可以添加到WP的底部。

2、調(diào)用

<button class="itemCopy red_tkl button_tkl" id="TKLS" type="button" data-clipboard-text="需要復制的內(nèi)容">一鍵復制</button>

如果有需要的話我們需要在哪里使用就調(diào)用。

3、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;
}

CSS樣式設置按鈕的樣式。