点击即复制

最新推荐文章于 2024-09-26 14:44:31 发布

weixin_30711917

最新推荐文章于 2024-09-26 14:44:31 发布

阅读量573

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/tenglongwentian/p/10167712.html

本文介绍了一种使用span标签实现点击即复制功能的方法，兼容Google、Firefox、IE（11,10,9,8）、Edge等浏览器。通过onclick和oncopy事件结合document.execCommand和clipboardData接口，实现了跨浏览器的文本复制。

前端实现，span标签的点击即复制功能，兼容性目前只测试了Google浏览，Firefox浏览器，Edge浏览器，IE浏览器（11,10,9,8版本，8之下版本未测试）；

代码如下：

 1 <!--(c) Copyright 2018 TenglongWenTian. All Rights Reserved. -->
 2 <!DOCTYPE html>
 3 <html>
 4     <head>
 5         <meta charset="utf-8" />
 6         <title>点击即复制</title>
 7     </head>
 8     <body>
 9         <h1>点击即复制</h1>
10         <p>1.针对span标签</p>
11         <p>2.onclick事件以及oncopy事件</p>
12         <span onclick='execClick();' oncopy='execCopy(event,this);' data-value='我是密码' title='点击复制地址及密码'>我是span标签,鼠标左键点击我即复制,兼容Google,Firefox,IE(11,10,9,8,后面的没测),Edge.</span>
13         <script type="text/javascript" src="js/jquery.min.js"></script>
14         <script type="text/javascript">
15             /**
16              * 点击复制
17              */
18             function execClick() {
19                 document.execCommand("copy");
20             }
21             /**
22              * 点击复制
23              * @param event
24              * @param obj
25              */
26             function execCopy(event, obj) {
27                 if(isIE()) {
28                     if(window.clipboardData) {
29                         if(isNull($(obj).attr("data-value"))) {
30                             window.clipboardData.setData("Text", "链接:" + obj.textContent + " 密码:" + $(obj).attr("data-value"));
31                             alert('复制成功!');
32                         } else {
33                             window.clipboardData.setData("Text", obj.textContent);
34                             alert('复制成功!');
35                         }
36                     }
37                 } else {
38                     event.preventDefault();
39                     if(event.clipboardData) {
40                         if(isNull($(obj).attr("data-value"))) {
41                             event.clipboardData.setData("text/plain", "链接:" + obj.textContent + " 密码:" + $(obj).attr("data-value"));
42                             alert('复制成功!');
43                         } else {
44                             event.clipboardData.setData("text/plain", obj.textContent);
45                             alert('复制成功!');
46                         }
47                     }
48                 }
49             }
50             /**
51              * 是否IE
52              * @returns {*}
53              */
54             function isIE() {
55                 var input = window.document.createElement("input");
56                 if(window.ActiveXObject === undefined) return null;
57                 if(!window.XMLHttpRequest) return 6;
58                 if(!window.document.querySelector) return 7;
59                 if(!window.document.addEventListener) return 8;
60                 if(!window.atob) return 9;
61                 if(!input.dataset) return 10;
62                 return 11;
63             }
64             /**
65              * 非空判断
66              * @param val
67              * @returns {boolean}
68              */
69             function isNull(val) {
70                 if(val == undefined || val == null || val == "") {
71                     return false;
72                 } else {
73                     return true;
74                 }
75             }
76         </script>
77     </body>
78 
79 </html>