前端实现，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>
不要局限于语言，希望评论留言，虽然不一定回复，但是有空会看的。
转载请注明出处，未经许可请勿私自添加水印，否则有权追究法律责任。