相容所有瀏覽器的點選複製文字內容效果
點選一個按鈕複製指定元素中的內容貌似在很久以前很容易實現。但是現在好像麻煩了許多,這是因為在很久以前,IE瀏覽器佔絕大多數,甚至都可以不用考慮其他瀏覽器,所以使用IE自帶的功能就可以實現,但是隨著時間的推移,各種瀏覽器的出席那,IE那獨有的方式已經不再適合,下面就分享一個能夠相容所有瀏覽器的方式。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.zclip.min.js"></script> <script> $(function(){ $('#copy_input').zclip({ path: 'js/ZeroClipboard.swf', copy: function(){//複製內容 return $('#mytext').val(); }, afterCopy: function(){//複製成功 $("<span id='msg'/>").insertAfter($('#copy_input')).text('複製成功'); } }); }); </script> </head> <body> <textarea id="mytext">請輸入內容</textarea><br/> <a href="#" id="copy_input" class="copy">複製內容</a> </body> </html>
上面的程式碼實現了點選元素複製指定元素內容效果,下面介紹一下注意點。
特別說明:
(1).首先要引入jquery和jquery.zclip外掛。
(2).要在伺服器環境下測試,否則沒有效果。
(3).如果是複製的內容來自輸入框input、textarea等表單元素,copy物件使用如下程式碼:
[JavaScript] 純文字檢視 複製程式碼copy: function(){ return $('#mytext').val(); }
如果是div、span或者p等元素,就需要使用如下方法:
[JavaScript] 純文字檢視 複製程式碼copy: function(){ return $('#mytext').text(); }
引數說明:
(1).path:swf呼叫路徑,必須,如js/ZeroClipboard.swf。
(2).copy:複製的內容,必須,任意字串,也可以是回撥函式返回的內容。
(3).beforeCopy:複製內容前回撥函式,可選。
(4).afterCopy:複製內容後回撥函式,可選。
完整程式碼下載:複製黏貼.rar
相關文章
- 相容所有瀏覽器的點選複製黏貼效果瀏覽器
- JS複製內容到剪貼簿(相容FF/Chrome/Safari所有瀏覽器)JSChrome瀏覽器
- 點選按鈕複製連結到我的貼上板【相容所有瀏覽器】瀏覽器
- 相容所有瀏覽器的placeholder效果瀏覽器
- 相容所有瀏覽器的圓角出效果瀏覽器
- 網頁內容複製貼上(三種方案 相容多種瀏覽器)網頁瀏覽器
- 相容所有瀏覽器的禁止選中div文字程式碼例項瀏覽器
- 相容所有瀏覽器的模糊效果程式碼例項瀏覽器
- 相容所有瀏覽器的圖片上傳本地預覽效果瀏覽器
- 相容所有瀏覽器的display:inline-block效果瀏覽器inlineBloC
- 相容所有瀏覽器的密碼框輸入提示效果瀏覽器密碼
- 點選文字框實現文字框內容選中效果
- forEach()相容所有瀏覽器瀏覽器
- css文字兩端對齊效果相容各瀏覽器CSS瀏覽器
- 相容所有瀏覽器js設定元素透明度效果瀏覽器JS
- js 實現點選複製內容JS
- 相容所有瀏覽器的getElementsByClassName()函式瀏覽器函式
- Mac電腦自帶的Safari瀏覽器複製網頁內容教程Mac瀏覽器網頁
- Css:背景色透明,內容不透明之終極方法!相容所有瀏覽器CSS瀏覽器
- 相容所有瀏覽器的陣列indexOf()方法瀏覽器陣列Index
- 相容所有瀏覽器的DOMContentLoaded事件瀏覽器事件
- 相容所有瀏覽器array物件indexOf()方法瀏覽器物件Index
- 相容所有瀏覽器的對聯廣告程式碼瀏覽器
- 相容所有瀏覽器的阻止事件冒泡程式碼瀏覽器事件
- 相容所有瀏覽器的阻止事件冒泡封裝瀏覽器事件封裝
- 相容所有瀏覽器的progress程式碼例項瀏覽器
- JS如何實現點選複製功能,JS點選複製文字JS
- 原生js如何建立相容所有瀏覽器的xmlhttp物件JS瀏覽器XMLHTTP物件
- js相容所有瀏覽器的事件繫結程式碼JS瀏覽器事件
- 相容所有瀏覽器的阻止事件冒泡js程式碼瀏覽器事件JS
- mui 點選長按複製文字UI
- js相容所有瀏覽器的pageX和pageY屬性JS瀏覽器
- 相容所有瀏覽器的獲取事件源物件程式碼瀏覽器事件物件
- 相容所有瀏覽器的js滑鼠中鍵滾動事件瀏覽器JS事件
- 相容所有瀏覽器的nextSibling瀏覽器
- js檢測瀏覽器內容縮放效果程式碼例項JS瀏覽器
- 滾動滑鼠縮放圖片相容所有瀏覽器瀏覽器
- 點選實現選中指定元素的文字內容