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

郑重承诺丨优站网提供安全交易、信息保真!
增值服务:
自动发货
网盘下载
安装指导
环境配置
二次开发
网站建设
¥ 0 (VIP免费升级VIP开通VIP尊享优惠特权
立即下载 升级会员 购买教程 售后支持
详情介绍

有时候我们可以看到,有些网站分享淘宝的淘宝密码或者网站文章的时候,可以点击一个按钮复制。这个操作非常的用户友好,可以直接点击复制打开对应的链接。当然,我们也可以使用一键复制功能,提高用户复制粘贴其他内容的体验。实现该功能的方法共享的。

首先,下载所需的文档

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

一共包含两个文件:“clipboard.min.js”文件和 “css 样式”文件

下载后解压,得到clipboard.min.js 和 copy.css ,把两个文件上传到网站根目录

二、引用 JS 与 css 文件
1,、引用 js 库,在当前主题的 footer.php 文件的末尾添加以下代码

<script src=“这里替换成你clipboard.min.js的路径网址 type=“text/javascript”&gt;</script>
<script>
var clipboard = new ClipboardJS(‘.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=“这里替换成copy.css 的路径网址”>

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

三、文章中添加一键复制按钮
在编辑文章时,在需要的位置添加以下代码,就可以看到点击一键复制指定内容的按钮了。
添加到文章结尾分享处也是一样的方法,

<button class=“itemCopy red_tkl button_tkl” id=“TKLS” type=“button” data-clipboard-text=“需要复制的内容文本url>按钮显示的文字</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”>按钮显示的文字</a></button>

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

资源下载此资源仅限注册用户下载,请先
客服QQ:1427707223
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

免责声明   ⚠️ 1. 本站所有资源来源于网络收集,若资源侵犯了您的合法权益, 请来信通知我们(Email: 1427707223@qq.com),我们会及时删除,给您带来的不便,我们深表歉意! 2. 分享目的仅供大家学习和交流,若使用商业用途,请购买正版授权! 否则产生的一切后果将由下载用户自行承担! 3. 会员不得使用于非法商业用途,不得违反国家法律。否则后果自负! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 6. 因源码具有可复制性,一经购买 ,不得以任何形式退款。 7.更多详情请点击查看

优站网 WordPress教程 网站通过 JS 代码实现点击按钮一键复制指定内容方法教程 https://www.zhanceo.com/20206.html

诚乃立身之本、信为道德之基

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

联系官方客服

为您解决烦忧 - 24小时在线 专业服务

网站通过 JS 代码实现点击按钮一键复制指定内容方法教程-海报