我们有时候会看到，有的网站分享淘宝的淘口令时，可以点击一键复制。这样的操作对用户很友好，可以直接点击复制后打开淘宝就能购物。当然，我们也可以利用点击一键复制功能，提升用户复制粘贴其他内容的体验。那么，如何实现这一功能呢？
下载所需文件
一共包含两个文件：“clipboard.min.js”文件和 “css 样式”文件
https://590m.com/file/948726-470510215
https://wypan.lanzouf.com/iJNGOfq320b
下载后解压，得到clipboard.min.js 和 fuzhi.css ，把两个文件上传到网站根目录。
引用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的路径网址">
PS，像DUX和Modown等主题，后台主题设置中，可以添加自定义代码。那么我们就可以把引用clipboard.min.js的代码，以及JS和CSS代码，直接放到主题设置中，这样的好处是我们升级主题后就不用再去修改主题的footer.php和header.php文件了。
文章中添加一键复制按钮
在编辑文章时，在需要的位置添加以下代码，就可以看到点击一键复制指定内容的按钮了。
<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操作的相关步骤。当然，您也可以使用自己修改喜欢的样式文件。
具体效果可参考下方文章中，复制邀请码的操作↓↓↓
评论0