有时候我们可以看到，有些网站在分享淘宝的淘宝密码或者网站文章的时候，可以点击一个按钮复制。这个操作非常的用户友好，可以直接点击复制打开对应的链接。当然，我们也可以使用一键复制功能，提高用户复制粘贴其他内容的体验。实现该功能的方法是共享的。
首先，下载所需的文档。
一共包含两个文件：“clipboard.min.js”文件和 “css 样式”文件
下载后解压，得到 clipboard.min.js 和 copy.css ，把两个文件上传到网站根目录。
二、引用 JS 与 css 文件
1,、引用 js 库，在当前主题的 footer.php 文件的末尾添加以下代码
<script src=“这里替换成你 clipboard.min.js 的路径网址” type=“text/javascript”></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> 
严正声明 百度一下，你就知道了 360搜一下你就知道了 搜狗搜一下你就知道了 谷歌搜一下你就知道了 
如果想要实现点击打开链接的同时，复制指定的内容，可以参考下方代码：
<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 操作的相关步骤。当然，您也可以使用自己修改喜欢的样式文件。
本文章已结束，如转载请注明：汇站网 » 网站通过 JS 代码实现点击按钮一键复制指定内容方法教程
免责声明
1 网站名称：汇站网
2 永久网址：https://www.huizhanii.com
3 本站资源来源于网友投稿和付费购买，仅供编程人员及源代码爱好者下载参考与研究，不提供任何技术支持服务！
4 资源展示图片及相关信息仅供参考，不代表本站立场！本站仅作为信息存储平台
5 禁止在服务器和虚拟机上搭建运营，所有资源仅限本地调试与研究使用，不支持联网运行！
6 未经版权方授权，严禁用于商业用途。使用者如违反国家法律法规，需自行承担全部法律责任！
7 请在下载后24小时内删除！建议支持正版授权作品
8 如资源侵犯您的合法权益，请提供版权证明及相关作品信息发送至邮箱：972908224@qq.com我们将及时处理
9 如遇下载链接失效或支付未到账，请联系站长处理
10 欢迎投稿优质源码或教程，审核通过后将获得相应奖励
11 资源收费仅用于维持网站正常运营
12 数字商品具有特殊性质，一经购买概不退款
13 查看更多详情
常见问题
相关文章
猜你喜欢
- WordPress教程：纯代码实现文章摘要添加ai功能 2024-12-03
- 为WordPress网站页面添加水印的教程——附带JS源代码 2024-11-26
- WordPress搜索结果页面防攻击：实现算术验证码功能 2024-11-18
- WordPress教程 数据库批量替换文章中的关键词内容 2024-11-17
- 利用CSS样式实现自定义的文本从右往左滚动效果 2024-11-17
- WordPress教程 网站缓慢卡顿优化方法 2024-10-26
- WordPress教程 纯代码实现今天、昨天、本周、本月注册用户统计获取 2024-10-26
- WordPress教程 文章链接Url改为.Html静态文件 2024-10-23
- PHP星座运势接口API源码 2024-10-23
- WordPress教程 网站有新文章发布时发送邮件通知所有用户 2024-10-23
严正声明 - 版权所有 © 归版权作者所有
- 版权说明 本站所有资源归版权作者所有 i版权声明
本站所提供的模板源码（主题/插件）等资源仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，有部分资源为网上购买或仿制而来，若模板侵犯了您的合法权益，请来信通知我们（站长QQ：972908224），我们会及时删除，给您带来的不便，我们深表歉意！
助力搜一下
