JS復制DOM元素文字內容


要實現的效果:將HTML頁面中的某個DOM元素例如DIV下面的文本內容進行復制。

實現過程如下:

 1 <html>
 2 <head>
 3     <title>Copy text Demo</title>
 4     <script type="text/javascript" src="jquery.min.js"></script>
 5     <script type="text/javascript">
 6      //復制內容
 7         function Copy()
 8         {
 9             var copyData = $('#testDiv').text();            
10             if (window.clipboardData) {
11                 window.clipboardData.clearData();
12                 window.clipboardData.setData("Text", copyData);
13                 alert('已經成功復制到剪帖板上!');
14             }
15             else
16             {
17                 selectText("testDiv");
18                 alert('非IE瀏覽器請使用CTRL + C鍵進行復制!');
19             }
20         }
21 
22         //選中文字
23         function selectText(element) {
24             var text = document.getElementById(element);//獲取要選中的內容
25             if (document.body.createTextRange) {//IE瀏覽器
26                 var range = document.body.createTextRange();//創建選區
27                 range.moveToElementText(text);//移動TextRange對象使其起始點之間包含指定對象內的文本
28                 range.select();//選中選區
29             } else if (window.getSelection) {//非IE瀏覽器,getSelection方法可以產生Selection對象,所對應的是用戶所選擇的 ranges (區
30 
31 域),俗稱拖藍。
32                 var selection = window.getSelection();               
33                 selection.removeAllRanges();//將所有的區域都從選區中移除
34                 var range = document.createRange();//返回新創建的 Range 對象,兩個邊界點都被設置為文檔的開頭
35                 range.selectNodeContents(text);//把范圍邊界設置為一個節點的子節點
36                 selection.addRange(range);//將一個區域(Range)對象加入選區
37             } 
38         }
39     </script>
40 </head>
41 <body>
42 <div id="testDiv" style="overflow-x: hidden; word-break:break-all;border:1px solid #CCC;width:500px;height:333px;margin:50px auto;"> 
43    JQuery是繼prototype之后又一個優秀的Javascript庫。它是輕量級的js庫 ,它兼容CSS3,還兼容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, 
44 
45 Opera 9.0+),jQuery2.0及后續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML(標准通用標記語言下的一個應用)、events、實
46 
47 現動畫效果,並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟
48 
49 的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離,也就是說,不用再在html里面插入一堆js來調用命令了,只需要定義id即可
50 
51 52 jQuery是一個兼容多瀏覽器的javascript庫,核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的
53 
54 barcamp發布,吸引了來自世界各地的眾多JavaScript高手加入,由Dave Methvin率領團隊進行開發。如今,jQuery已經成為最流行的javascript庫,在
55 
56 世界前10000個訪問最多的網站中,有超過55%在使用jQuery。
57 jQuery是免費、開源的,使用MIT許可協議。jQuery的語法設計可以使開發更加便捷,例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使
58 
59 用Ajax以及其他功能。除此以外,jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕松的開發出功能強大的靜態或動態網頁。
60 jQuery,顧名思義,也就是JavaScript和查詢(Query),即是輔助JavaScript開發的庫。
61 </div>
62 <div style='width:500px;margin:10px auto;'>
63     <input type="button" value="復制div中的內容" onclick="Copy()" />
64 </div>
65 </body>
66 </html>
View Code

注意,實現是JS+jquery,所以首先要先有個jquery庫文件。下載地址:http://jquery.com/download/

目前只能在IE下直接復制,其他瀏覽器只能做到幫用戶全選。

最終執行效果圖:

1.IE

2.谷歌瀏覽器

3.火狐瀏覽器

 

參考例子:

1.https://developer.mozilla.org/zh-CN/docs/Web/API/Selection

2.http://www.zhangxinxu.com/wordpress/?p=755


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM