黑马程序员技术交流社区

标题: 网站常用轻量级插件实现一键复制 [打印本页]

---

作者: mangoboy    时间: 2018-9-8 00:37
标题: 网站常用轻量级插件实现一键复制
我说的这个轻量级插件叫clipboard.js下载链接：https://github.com/zenorocha/clipboard.js
此处我选择的是

然后新建一个html文件
第一步：引入 <script type="text/javascript" src="clipboard.min.js"></script>
第二步：html核心代码（样式代码省略）：
<div class="div1">
客服联系电话：<span id="tel">13800138xxx</span>
<button  data-clipboard-target="#tel" id="copy">一键复制</button>
</div>

第三步：
<script>
function copytext() {
         var clipboard = new ClipboardJS('#copy');
                 clipboard.on('success', function(e) {
                 e.clearSelection(); //选中需要复制的内容
                 alert("复制成功！您复制的内容是可以鼠标粘贴");
         });
         clipboard.on('error', function(e) {
                 alert("当前浏览器不支持此功能，请手动复制。")
         });
}
</script>

效果如下：

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2