Clipboard.js實(shí)現(xiàn)點(diǎn)擊自動(dòng)復(fù)制內(nèi)容的功能

點(diǎn)擊非文本框，自動(dòng)復(fù)制，代碼如下

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

　　2. 點(diǎn)擊按鈕，復(fù)制文本框內(nèi)容，代碼如下

<!-- 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');//優(yōu)雅降級:safari 版本號>=10,提示復(fù)制成功;否則提示需在文字選中后，手動(dòng)選擇“拷貝”進(jìn)行復(fù)制 clipboard.on('success', function(e) {alert('復(fù)制成功!');e.clearSelection();});clipboard.on('error', function(e) {alert('請選擇“拷貝”進(jìn)行復(fù)制!')}); </script>

　　3. 點(diǎn)擊按鈕，復(fù)制html代碼（new 對象的時(shí)候?yàn)槠滟x值即可），代碼如下

<button type="button" class="btn btn-default embedAddress" data-clipboard-action="copy" onclick="copyEmbed()">復(fù)制地址</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="網(wǎng)址"></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("復(fù)制成功");e.clearSelection();clipboard.destroy();});clipboard.on('error',function (e) {alert("復(fù)制失敗,請重新復(fù)制");clipboard.destroy();});}

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

　　 如果HTML代碼執(zhí)行的話，可以不放到textarea中，這樣就不用轉(zhuǎn)換HTML代碼中的‘<’，‘>’,復(fù)制的就是所需的代碼。

?

　　參考文檔

轉(zhuǎn)載于:https://www.cnblogs.com/yu-yuan/p/9627048.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。