最近在寫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 ) }); } })