JS 实现复制功能

haibao 笔记 2016-01-15 16:21 726
一个人的价值, 在于他贡献了什么, 而不在于他获得了什么。——爱因斯坦

凌晨好, 本文除去代码部分,共2281个字,预计阅读时间需要6分钟。

最近一直忙着APP大版本开发工作,没来得及更新小博客,期间由于需要使用复制代码的功能,便写了一个公共的方法自己使用,不知道大家有没有其它好的方法,欢迎推荐,3Q ~~

好了,废话不多说,具体代码贴出来 如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>JS复制</title>
	<style>
		.wrap{width:200px;margin:0 auto;text-align:center;}
		#toast{width:80%;position:fixed;bottom:5%;left:10%;z-index:999999;background-color:rgba(0,0,0,.7);border-radius:5px;color:#fff;padding:10px 0;text-align:center;-webkit-animation: zoomOut .3s ease both;}
		@-webkit-keyframes zoomOut { 0% { opacity: 0; -webkit-transform: scale(.6); } 100% { opacity: 1; -webkit-transform: scale(1); } }
	</style>
</head>
<body>
 
	<div class="wrap">
		<textarea cols="20" rows="10" id="txt">请输入内容...</textarea><br /><br />
		<input type="button" id="copy" value="点击复制代码" />
	</div>
 
	<script>
		document.getElementById('copy').onclick = function(){
			var txt = document.getElementById('txt').value;
			copyToClipboard(txt);
		}
 
		//显示提示框
		var toast_timer = 0;
		function showToast(message,t){
		    var alert = document.getElementById("toast");
		    if(alert == null){
		        alert =  document.createElement("div");
		        alert.id = 'toast';
		        alert.className = 'fd';
		        alert.innerText = message;
		    }else{
		        alert.style.opacity = .9;
		    }
		    document.body.appendChild(alert);
		    t = (t != undefined) ? t : 1000;
		    toast_timer = setTimeout(hideToast, t);
		}
 
		//隐藏提示框
		function hideToast(){
		    var alert = document.getElementById("toast");
		    if(alert != null) document.body.removeChild(alert); clearTimeout(toast_timer);
		}
 
		function copyToClipboard(txt) {
	        if (window.clipboardData) {
	            window.clipboardData.clearData();
	            clipboardData.setData("Text", txt);
	            showToast("复制成功!");
 
	        } else if (navigator.userAgent.indexOf("Opera") != -1) {
	            window.location = txt;
	        } else if (window.netscape) {
	            try {
	                netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
	            } catch (e) { 
	                showToast("被浏览器拒绝!\n请在浏览器地址栏输入'about:config'并回车\n然后将 'signed.applets.codebase_principal_support'设置为'true'",3000);
	            }
	            var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
	            if (!clip)
	                return;
	            var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
	            if (!trans)
	                return;
	            trans.addDataFlavor("text/unicode");
	            var str = new Object();
	            var len = new Object();
	            var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
	            var copytext = txt;
	            str.data = copytext;
	            trans.setTransferData("text/unicode", str, copytext.length * 2);
	            var clipid = Components.interfaces.nsIClipboard;
	            if (!clip)
	                return false;
	            clip.setData(trans, null, clipid.kGlobalClipboard);
	            showToast("复制成功!");
	        } else {
				document.getElementById('txt').select(); 
				document.execCommand("Copy"); 
				showToast("复制成功!");
	        }
	    }
	</script>
</body>
</html>

本文标题:JS 实现复制功能

本文地址:http://www.hehaibao.com/js-copy/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用*标注