北京天佑工作室
欢迎来到我的世界。
北京 · 中国
WordPress 通过 JS 代码实现点击按钮一键复制指定内容
今天有需求想实现点击一个按钮自动一键复制指定的内容，但是搜来搜去都是关于防止 WordPress 内容被复制的教程。后来找到一个通过 clipboard.js 实现利用 JS 代码一键复制指定内容的方法，适用于 WordPress，这里分享给大家。
一、下载一键复制 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 的末尾添加如下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 文件地址。
之后在文章中的某个需要复制的地方放一个按钮就可以了：
|
1 |
<button class="itemCopy red_tkl button_tkl" id="TKLS" type="button" data-clipboard-text="需要复制的内容">一键复制</button> |
三、效果图
这里再分享下我的 css：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.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; } |
具体的效果可以查看：剁手部落