H5复制文本
最近在写h5页面中有个复制QQ号的功能，要实现复制功能，需要使用clipboard.js实现，clipboard.js官方地址：http://www.clipboardjs.cn/；记录一下：
实现过程：
1、在官网下载clipboard.js，将dist目录下的任一js复制到自己的项目。然后再html页面引入；
2、html页面需要使用input的value属性才能实现复制；
3、然后js里面写复制逻辑；
4、input的ID和复制按钮的 data-clipboard-target="#copyVal3"的名称一样才可以；
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>联系客服</title> <script src="./js/jquery-3.4.1.min.js"></script> <script src="./js/clipboard.min.js"></script> <script src="./js/contactService.js"></script> </head> <body> <div class='container'> <!--需要复制的QQ隐藏了也可以复制，但是display:none不行--> <input type="text" id="copyVal1" value="24539268" style="opacity: 0;" > <input type="text" id="copyVal2" value="3383939771" style="opacity: 0;" > <input type="text" id="copyVal3" value="252199286" style="opacity: 0;" > <!--复制按钮--> <div id="copyBtn1" class="copy font_28 red_color" data-clipboard-target="#copyVal1">复制按钮1</div> <div id="copyBtn2" class="copy font_28 red_color" data-clipboard-target="#copyVal2">复制按钮2</div> <div id="copyBtn3" class="copy font_28 red_color" data-clipboard-target="#copyVal3">复制按钮3</div> <!--复制内容提示信息--> <div class="mess_box fixed font_28">已复制</div> </div> </body> </html>
$(function () { // 点击复制 copy('#copyBtn1') copy('#copyBtn2') copy('#copyBtn3') //实例化 ClipboardJS对象，用于复制功能; function copy(className) { var clipboard = new ClipboardJS(className); clipboard.on("success",function(e){ console.log('复制的内容', e.text) // 复制成功 e.clearSelection(); // 弹出提示信息 $(".mess_box").fadeIn(100).delay(1000).fadeOut(300); }); clipboard.on("error",function(e){ //复制失败； console.log( e.action ) }); } })
