JQuery實現複製數據到剪貼板之各類麻花與右鍵點擊彈出選擇菜單

時間 2019-11-13

標籤 jquery 實現複製數據剪貼板各類麻花右鍵點擊彈出選擇菜單欄目 JQuery 简体版

原文原文鏈接

1.若是小夥伴們只是想實現點擊某個按鈕（經過click事件）實現複製功能。javascript

　那小哥哥我在這裏推薦你們使用2個很是好用的插件css

（1）clipboard.js：純js插件，無需flash，相對來講更輕量級一些（比較推薦）html

　　具體用法和插件下載見以下官方地址：https://clipboardjs.com/java

（2）zeroclipboard.js:使用js+swf實現複製功能jquery

　　同上：http://zeroclipboard.org/瀏覽器

Tip：上面兩個插件的共同點是，經過配置觸發dom（如button等），text（須要dom

複製到剪貼板的內容）；But，都必須經過【click】觸發複製功能。ide

2.若是你想經過別的event觸發複製功能：好比右鍵實現複製功能 ui

（1）下面這些是實現直接將值傳給剪貼板，但都存在瀏覽器的兼容性和組件限制的狀況this

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript">
 7         //方法1:textarea或者input等支持select()的dom組件
 8         function copyUrl2()
 9         {
10             var Url2=document.getElementById("biao1");
11             Url2.select(); // 選擇對象
12             document.execCommand("Copy"); // 執行瀏覽器複製命令
13             alert("已複製好，可貼粘。");
14         }
15         //方法2:window.clipboardData.setData()這個方法限IE
16         function copyToClipBoard(){
17             var clipBoardContent="";
18             clipBoardContent+=document.title;
19             clipBoardContent+="";
20             clipBoardContent+=this.location.href;
21             window.clipboardData.setData("Text",clipBoardContent);
22             alert("複製成功，請粘貼到你的QQ/MSN上推薦給你的好友");
23         }
24         //方法3:execCommand("copy"),這個方法在input組件上仍是有效的
25         function oCopy(obj){
26             obj.select();
27             js=obj.createTextRange();
28             js.execCommand("Copy")
29             alert("複製成功!");
30         }
31 
32     </script>
33 </head>
34 <body>
35 <!--方法1-->
36 <textarea cols="20" rows="10" id="biao1">用戶定義的代碼區域</textarea>
37 <input type="button" onClick="copyUrl2()" value="點擊複製代碼" />
38 <br>
39 <!--方法2-->
40 <!--
41 <input type="button" name="anniu1" onClick='copyToClipBoard()' value="複製專題地址和url地址，傳給QQ/MSN上的好友">
42 -->
43 <!--方法3-->
44 <!--
45 <input onclick="oCopy(this)" value="你好.要copy的內容!">
46 -->
47 
48 </body>
49 </html>

（2）採用clipboard.js和zeroclipboard.js插件的基礎上；在你想要的採用的觸發方式的方法裏，採用模擬鼠標click事件

如：$('#btn').trigger('click');這個與$('#btn').click()方法一致；

固然，這個方法證實是不可行的，由於插件內部估計是有加模擬鼠標點擊事件跟用戶真實點擊事件的判斷

（3）最後採用了一個很垃圾的折中辦法，鼠標右鍵點擊，先彈出一個複製菜單。點擊菜單選擇複製

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="//img.chinanetcenter.com/js/jquery/jquery-1.8.1.min.js"></script>
 7     <style>
 8         #myMenu{
 9             position:absolute;
10             width: 80px;
11             border:grey 1px solid;
12             display:none;
13         }
14         .js-copy-item{
15             list-style: none;
16             width: 80px;
17             height: 20px;
18             line-height: 20px;
19             text-align: center;
20         }
21 
22     </style>
23     <script>
24     $(function() {
25         $('.ui-contextmenu').on('contextmenu',function(e){//右鍵彈出菜單
26             $('#myMenu').show().css({
27                 'top':e.pageY+13+'px',
28                 'left':e.pageX+13+'px'
29                 });
30         e.preventDefault();//防止點擊事件冒泡
31         });
32             $(window).click(function(){//鼠標 點擊任意位置，菜單消失
33             $('#myMenu').hide();
34         })
35    });
36     
37     </script>
38 </head>
39 <body>
40 <div id="myMenu" >
41     <ul>
42         <li class="js-copy-item">複製</li>
43     </ul>
44 </div>
45 <span class="ui-contextmenu">來呀，右鍵我！</span>