Clipboard.js實現點擊自動復制內容的功能

點擊非文本框，自動復制，代碼如下

value:<span id="bar" class="btn" data-clipboard-target="#bar">value</span> <script src="clipboard.min.js"></script> <script>//initvar clipboard = new Clipboard('.btn');//優雅降級:safari 版本號>=10,提示復制成功;否則提示需在文字選中后，手動選擇“拷貝”進行復制 clipboard.on('success', function(e) {alert('復制成功!');e.clearSelection();});clipboard.on('error', function(e) {alert('請選擇“拷貝”進行復制!')}); </script>

　　2. 點擊按鈕，復制文本框內容，代碼如下

<!-- Target --> <input id="bar" value="Mussum ipsum cacilds..."> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut to clipboard </button> <script src="clipboard.min.js"></script> <script>//initvar clipboard = new Clipboard('.btn');//優雅降級:safari 版本號>=10,提示復制成功;否則提示需在文字選中后，手動選擇“拷貝”進行復制 clipboard.on('success', function(e) {alert('復制成功!');e.clearSelection();});clipboard.on('error', function(e) {alert('請選擇“拷貝”進行復制!')}); </script>

　　3. 點擊按鈕，復制html代碼（new 對象的時候為其賦值即可），代碼如下

<button type="button" class="btn btn-default embedAddress" data-clipboard-action="copy" onclick="copyEmbed()">復制地址</button><textarea id="embedAddrModel" style="display: none;"><iframe id="fram" height="428px" width="800px" frameborder="0" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true" src="網址"></iframe> </textarea>function copyEmbed() {var clipboard = new Clipboard('.btn',{text: function (trigger) {var html = document.getElementById('embedAddrModel').innerHTML;for (var i = 0; i < 2; i ++){html = html.replace('&lt;','<');html = html.replace('&gt;','>');}return html;}});clipboard.on('success',function (e) {alert("復制成功");e.clearSelection();clipboard.destroy();});clipboard.on('error',function (e) {alert("復制失敗,請重新復制");clipboard.destroy();});}

　　?復制HTML，可以將HTML代碼放到textarea中，防止頁面解析此段代碼；但是獲取的HTML代碼中的“<”，“>”會被解析成‘&lt;’,'&gt;'，所以需要將其轉換回去；

　　 如果HTML代碼執行的話，可以不放到textarea中，這樣就不用轉換HTML代碼中的‘<’，‘>’,復制的就是所需的代碼。

?

　　參考文檔

轉載于:https://www.cnblogs.com/yu-yuan/p/9627048.html

總結

以上是生活随笔為你收集整理的Clipboard.js实现点击自动复制内容的功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。