標籤：
要實現的效果：將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 else16 {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（標準通用標記語言 (SGML)下的一個應用）、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.Google瀏覽器
3.Firefox瀏覽器
參考例子：
1.https://developer.mozilla.org/zh-CN/docs/Web/API/Selection
2.http://www.zhangxinxu.com/wordpress/?p=755
JS複製DOM元素文字內容
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
