点击即复制

前端实现，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>

不要局限于语言，希望评论留言，虽然不一定回复，但是有空会看的。

转载请注明出处，未经许可请勿私自添加水印，否则有权追究法律责任。

点击即复制

推荐阅读