JS實現(xiàn)復制內容到剪貼板功能兼容所有瀏覽器(推薦)
兩天前聽了一個H5的分享,會議上有一句話,非常有感觸:不是你不能,而是你對自己的要求太低。很簡單的一句話,相信很多事情不是大家做不到,真的是對自己的要求太低,如果對自己要求多一點,那么你取得的進步可能會更大。成長以來,很多朋友也聽說到不少激勵自己上進的話,但不是每個人都能一直堅持做下來,其實,這個跟自己的性格以及周圍的環(huán)境都有很大關系,只能說多找方法、條件給自己鼓勵,不斷提高對自己的要求,才有機會獲得多一點的成就。
2023年最好用的復制代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <span class="orange" id="shareUrl" data-url="www.baidu.com">www.baidu.com</span> <script> // 復制 function copyText(text) { var textArea = document.createElement("textarea"); // textArea.style['display']='none' textArea.style['position'] = 'absolute' textArea.style['top'] = '0' textArea.style['left'] = '0' textArea.value = text; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log(msg) } catch (err) { console.error('復制失敗', err); } document.body.removeChild(textArea); if (successful) { return true } }; $(function() { var shareUrl = $("#shareUrl").data("url"); $("#shareUrl").click(function() { var shareUrl = $("#shareUrl").data("url"); if (copyText(shareUrl)) { alert("復制成功"); } }) }) </script> </body> </html>
今年下半年打算在組內建個叫『移動開發(fā)指南』的站點,在網站框架搭建過程,有一個功能需要實現(xiàn)復制文本到剪貼板,相信這個功能很常用,但是對于不常寫JS代碼的我來說是一個比較大的挑戰(zhàn),回想以前做過的一個站點,使用window.clipboardData實現(xiàn)復制到剪貼板功能,也僅僅支持IE和FF瀏覽器,當時在百度找個幾個方案,看不下去就放棄了,后來在代碼中做了判斷,如果不支持該屬性,就直接alert:此功能不支持該瀏覽器,請手工復制文本框中內容,現(xiàn)在想想真是偷懶啊,嘿嘿,有沒有人中槍啊~
alert("此功能不支持該瀏覽器,請手工復制文本框中內容");
現(xiàn)在網絡上其實并沒有比較詳細講解js實現(xiàn)復制到剪貼板功能,很多文章是千遍一律,對于需要使用復制到剪貼板功能的童鞋來說,是比較蛋疼的,今天給大家?guī)磉@塊的分享,由于能力有限,有錯誤的地方還請大家多多指教~
相信很多使用wordpress搭建過站點的同學都知道它采用了jQuery,對jQuery大家并不陌生,使用起來非常簡單,可惜jQuery本身并沒有實現(xiàn)復制到剪貼板的功能,但或許它的API會有這個功能。這次我搭建的站點采用wordpress,花了點時間搜索jQuery復制到剪貼板的API,還真的有:jQuery ZeroClipboard ,于是使用它在wordpress簡單實現(xiàn)了復制到剪貼板的功能。但是呢,jQuery ZeroClipboard原來是有個父親大人,叫Zero Clipboard。
Zero Clipboard作為一個獨立的js庫,它利用 Flash 進行復制,需要兩個文件:ZeroClipboard.js 和 ZeroClipboard.swf 。網絡上有2個版本,實現(xiàn)原理都是使用flash進行復制,不知道原創(chuàng)是誰的,也可能一家子的2個兄弟,這個就不管了,只要我們自己做到尊重版權,表示問心無愧,今天給大家介紹的這個版本相對來說比較簡單。
首先看下圖是為使用Zero Clipboard后生成的flash對象,它能兼容的flash10及以下版本,兼容所有的瀏覽器:
Zero Clipboard的官方地址:http://zeroclipboard.org/,github地址:https://github.com/zeroclipboard/ZeroClipboard
使用它需要搭建服務器環(huán)境,可能有同學不太清楚,關于搭建服務器環(huán)境的,方法有很多,如xp或者win7系統(tǒng)自帶的IIS,也可以使用xampp、appserv、APMServ等集成包,安裝即可,搭建起來非常簡單,這里不做介紹~
現(xiàn)在我們先使用獨立的js庫Zero Clipboard簡單實現(xiàn)復制到剪貼板功能,demo如下:
<!DOCTYPE html> <html> <head> <title>Zero Clipboard Test</title> <meta charset="utf-8"> </head> <body> <!--
說明:
1.data-clipboard-target 輸入要復制的對象的ID
--> <button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b>復制到剪貼板</b></button> <br/> <textarea id="fe_text" cols="50" rows="3">輸入需要復制的內容</textarea> </body> </html> <script type="text/javascript" src="ZeroClipboard.js"></script> <script type="text/javascript"> // 定義一個新的復制對象 var clip = new ZeroClipboard( document.getElementById("d_clip_button"), { moviePath: "ZeroClipboard.swf" } ); // 復制內容到剪貼板成功后的操作 clip.on( 'complete', function(client, args) { alert("復制成功,復制內容為:"+ args.text); } ); </script>
demo下載 (溫馨提示:下載代碼的同學,瀏覽demo時記得使用服務器環(huán)境,不然看不到效果的~)
上面代碼注釋中已經對Zero Clipboard的功能進行了介紹,需要了解更多的功能請到https://github.com/zeroclipboard/ZeroClipboard
接下來介紹jQuery ZeroClipboard
jQuery ZeroClipboard是在ZeroClipboard的基礎上進行的改良,簡稱zClip,作為jQuery的API,jQuery ZeroClipboard也表現(xiàn)的非常簡易操作,官方地址:http://www.steamdev.com/zclip/
使用前需引用2個js文件:jquery.js和jquery.zclip.js
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.zclip.js"></script>
現(xiàn)在我們使用jquery.zclip.js簡單實現(xiàn)復制到剪貼板功能demo如下:
<!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <meta charset="utf-8"> <style type="text/css"> .line{margin-bottom:20px;} /* 復制提示 */ .copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;margin:0 0 -20px -80px;background-color:rgba(0, 0, 0, 0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);padding:6px;} .copy-tips-wrap{padding:10px 20px;text-align:center;border:1px solid #F4D9A6;background-color:#FFFDEE;font-size:14px;} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.zclip.js"></script> </head> <body> <div class="line"> <h2>demo1 點擊復制當前文本</h2> <a href="#none" class="copy">點擊復制我</a> </div> <div class="line"> <h2>demo2 點擊復制表單中的文本</h2> <a href="#none" class="copy-input">點擊復制單中的文本</a> <input type="text" class="input" value="輸入要復制的內容" /> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ /* 定義所有class為copy標簽,點擊后可復制被點擊對象的文本 */ $(".copy").zclip({ path: "ZeroClipboard.swf", copy: function(){ return $(this).text(); }, beforeCopy:function(){/* 按住鼠標時的操作 */ $(this).css("color","orange"); }, afterCopy:function(){/* 復制成功后的操作 */ var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>? 復制成功</div></div>"); $("body").find(".copy-tips").remove().end().append($copysuc); $(".copy-tips").fadeOut(3000); } }); /* 定義所有class為copy-input標簽,點擊后可復制class為input的文本 */ $(".copy-input").zclip({ path: "ZeroClipboard.swf", copy: function(){ return $(this).parent().find(".input").val(); }, afterCopy:function(){/* 復制成功后的操作 */ var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>? 復制成功</div></div>"); $("body").find(".copy-tips").remove().end().append($copysuc); $(".copy-tips").fadeOut(3000); } }); }); </script>
demo下載 (溫馨提示:下載代碼的同學,瀏覽demo時記得使用服務器環(huán)境,不然看不到效果的~)
上面代碼中結合jQuery的操作節(jié)點的功能,出色的發(fā)揮jquery.zclip.js的作用,如復制前后的操作,動態(tài)插入節(jié)點,也可見jquery.zclip.js的強大之處,使用起來是非常簡單。需要深入了解更多jquery.zclip.js的功能請到http://www.steamdev.com/zclip/
從上面獨立的js庫ZeroClipboard.js和jquery.zclip.js 都是采用flash實現(xiàn)實現(xiàn)復制到剪貼板的功能,可以看出,使用ZeroClipboard.js帶來功能相對比較少,不過它是獨立的庫,文件比較小,而使用jquery.zclip.js后的功能是比較豐富,不過對于不使用jQuery框架的站點來說,采用jquery.zclip.js是比較浪費寬帶。使用哪種復制方式還是得看產品的具體定位情況~
以上所述是小編給大家介紹的JS實現(xiàn)復制內容到剪貼板功能兼容所有瀏覽器(推薦),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
頁面加載完成后再執(zhí)行JS的jquery寫法以及區(qū)別說明
本篇文章主要是對頁面加載完成后再執(zhí)行JS的jquery寫法以及區(qū)別進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jquery中的查找parents與closest方法之間的區(qū)別
這篇文章主要是對jquery中的查找parents與closest方法之間的區(qū)別進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jQuery實現(xiàn)鼠標移到元素上動態(tài)提示消息框效果
當光標移動到某些元素上時,會彈出像tips的提示框,這種效果想必大家都有見到過吧,下面有個不錯的示例,大家可以感受下2013-10-10