用JS如何做点击复制文本的功能？
发布时间：2022-01-12 03:05:57 所属栏目：语言 来源：互联网
导读：用JS怎样做点击复制文本的功能？点击按钮实现复制文本的功能还是比较实用的，例如下本实现的复制邀请码的功能，此外点击复制文本的应用场景还有很多。感兴趣的朋友可以参考下文实例，接下来我们就一起来了解看看。 准备：先去下载clipboard.js: 官网 移动
|
用JS怎样做点击复制文本的功能？点击按钮实现复制文本的功能还是比较实用的，例如下本实现的复制邀请码的功能，此外点击复制文本的应用场景还有很多。感兴趣的朋友可以参考下文实例，接下来我们就一起来了解看看。 准备：先去下载clipboard.js: 官网 移动端效果如下： 应用：html+js 代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" > <script src="/res/js/jquery.min.js"></script> <script type="text/javascript" src="/res/js/clipboard.min.js"></script> <style> body{ font-weight: 300; } .code-box{ border-radius: 5px; background: #f0830f; height: 80px; text-align: center; } .my-code{ height: 20px; line-height: 20px; margin-top: 10px; } .btn-copy{ height: 30px; line-height: 30px; border-radius: 15px; font-weight: 400; font-size: 14px; background-color: #fff1c8; color:#F06D4A; width: 40%; margin: 5px 30%; } </style> </head> <body> <div class="text-center">―― 复制邀请码，好礼领回家 ――</div> <div class="code-box"> <div class="my-code" id="code">{$code}</div> <div class="btn-copy" id="codeBtn" data-clipboard-target="#code">复制邀请码</div> </div> <script> $(".btn-copy").click(function(){ //实例化clipboard var clipboard = new ClipboardJS('#codeBtn'); clipboard.on("success", function(e){ alert('复制成功'); e.clearSelection(); clipboard.destroy(); // 如果不销毁，第一次以后的复制，会有重复的alert弹出 }); clipboard.on("error", function(e){ alert("复制失败，请手动复制!"); clipboard.destroy(); // 如果不销毁，第一次以后的复制，会有重复的alert }); }); </script> </body> </html>  （编辑：温州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
