JS插件clipboard.js实现一键复制粘贴功能

2019-11-19 13:20:05

字体：大中小

来源：转载

供稿：网友

一键复制粘贴功能需要用到一个轻量级的JS插件：clipboard.js。

下载到本地后，将其放入项目中，直接引用即可。具体实现代码如下：

<!DOCTYPE html><html>   <head> <meta charset="UTF-8"> <title>一键复制粘贴</title> <style> .transfer {  width: 90%;  margin: 20px auto;  font-size: 18px; } .transfer button {  margin-top: -5px;  float: right;  margin-left: 10px;  background-color: rgb(3, 169, 244);  width: 30%;  height: 25px;  font-size: 14px;  color: white;  border: 0; border-radius: 8%; } </style> </head>  <body> <div class="transfer"> 支付宝：<span id="zfb_account">11111111111</span> <button onclick="copy1()" data-clipboard-action="copy" data-clipboard-target="#zfb_account" id="copy_zfb">一键复制</button> </div> <div class="transfer"> 微信：<span id="wx_account">2222222</span> <button onclick="copy2()" data-clipboard-action="copy" data-clipboard-target="#wx_account" id="copy_wx">一键复制</button> </div> <input type="text" /> </body>  <script type="text/javascript" src="../js/clipboard.min.js"></script> <script> function copy1() { var clipboard = new Clipboard('#copy_zfb'); clipboard.on('success', function(e) { e.clearSelection(); //选中需要复制的内容 alert("复制成功！"); }); clipboard.on('error', function(e) { alert("当前浏览器不支持此功能，请手动复制。") }); }  function copy2() { var clipboard = new Clipboard('#copy_wx'); clipboard.on('success', function(e) { e.clearSelection(); //选中需要复制的内容 alert("复制成功！"); }); clipboard.on('error', function(e) { alert("当前浏览器不支持此功能，请手动复制。") }); } </script> </html>

效果图：