实用网络资源收集
购物网赚福利分享

WordPress网站通过 JS 代码实现点击按钮一键复制指定内容方法教程 亲测可用

我们有时候会看到,有的网站分享淘宝的淘口令时,可以点击一键复制。这样的操作对用户很友好,可以直接点击复制后打开淘宝就能购物。当然,我们也可以利用点击一键复制功能,提升用户复制粘贴其他内容的体验。那么,如何实现这一功能呢?

一、下载一键复制 clipboard.min.js 文件和 css 样式文件

https://wypan.lanzous.com/iJNGOfq320b

备用地址:https://wypan.lanzoui.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 的路径网址">

注意:一定要把上方代码中的文件路径替换成自己网站的文件路径。

三、在文章中添加一键复制按钮代码

在编辑文章时,在需要的位置添加以下代码,就可以看到点击一键复制指定内容的按钮了。

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

如果不需要我们提供的css样式,可以省略css操作的相关步骤。当然,您也可以使用自己修改喜欢的样式文件。

具体效果可参考下方文章中,复制邀请码的操作↓↓↓

手机网购省钱神器,免费加入还能兼职网上赚钱

本文于 2020-10-21 下午 更新内容,购买的内容若有问题,可联系网站客服处理省钱 如何获取淘宝、天猫、京东商城、拼多多、唯品会、苏宁易购内部隐藏优惠券+购物返利(返还现金),买东西省钱呢? 其...

时间:2019-08-29 分类:图文馆 阅读:2997 评论:0

手机网购省钱神器,免费加入还能兼职网上赚钱-爱淘数字资源馆

WordPress网站通过 JS 代码实现点击按钮一键复制指定内容方法教程 图文馆 第1张

赞(0) 打赏
未经允许不得转载:爱淘数字资源馆 » WordPress网站通过 JS 代码实现点击按钮一键复制指定内容方法教程

评论 抢沙发

9 + 2 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的鼓励,是我们持续更新的动力!

微信扫一扫打赏