[剪貼板.js — 復制到不帶 Flash 的剪貼板 (clipboardjs.com)](https://clipboardjs.com/) [zenorocha/clipboard.js: Modern copy to clipboard. No Flash. Just 3kb gzipped (github.com)](https://github.com/zenorocha/clipboard.js) ``` <div class="add4_but"> <p data-clipboard-text="這里是要復制的內容">復制報名鏈接，邀請領取門票！</p> </div> // js: var clipboard=new ClipboardJS('.add4_but p'); clipboard.on('success', function(e) { //復制成功后執行 }); clipboard.on('error', function(e) { //復制失敗后執行 }); ``` ``` ## JS里指定復制的內容 復制到剪切板-333 //從屬性里復制 var btn = document.getElementById('btn'); var clipboard = new Clipboard(btn);//實例化 clipboard.on('success', function(e) {//復制成功執行的回調，可選 console.log(e); }); clipboard.on('error', function(e) {//復制失敗執行的回調，可選 console.log(e); }); //從另外一個元素復制內容 var btn2 = document.getElementById('btn2'); var clipboard2 = new Clipboard(btn2);//實例化 clipboard2.on('success', function(e) {//復制成功執行的回調，可選 console.log(e); }); clipboard2.on('error', function(e) {//復制失敗執行的回調，可選 console.log(e); }); //JS里指定復制的內容 var btn3 = document.getElementById('btn3'); var clipboard3 = new Clipboard(btn3, { text: function() { return '333-JS里指定復制的內容'; } }); clipboard3.on('success', function(e) {//復制成功執行的回調，可選 console.log(e); }); clipboard3.on('error', function(e) {//復制失敗執行的回調，可選 console.log(e); }); ``` ## **自己寫(好像不支持ios)** ``` <a id="articleHref" th:href="@{/post/{url}(url=${article.articleUrl})}"></a> <button type="button" id="copy" class="medium ui teal basic button"> <i class="fa fa-paper-plane"></i>&emsp;分享給好友 </button> ``` ``` <script th:inline="javascript"> $("#copy").click(function () { var obj = document.getElementById("articleHref"); var input = document.createElement("input"); document.body.appendChild(input); input.value = obj.href; input.select(); try { //進行復制到剪切板 if (document.execCommand("Copy", true, null)) { //如果復制成功 alert("復制鏈接成功！趕緊分享給你的好友吧~"); //隱藏input框 input.hidden = "hidden"; } else { //如果復制失敗 alert("復制失敗！"); } } catch (err) { //如果報錯 alert("復制錯誤！") } }) </script> ```