当前位置: 首页 > 前端笔记 > JAVASCRIPTS > JS代码预览、全选、复制功能
2014年12八月

JS代码预览、全选、复制功能

经常看到有些提供教程的网站,如w3cschool,有个很酷的功能就是代码预览。扒拉扒拉源码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码预览、全选、复制功能</title>
</head>

<body>
<textarea id="code" style="width:100%; height:200px;">
	<div id="abc">
	我不是黄蓉!我不会武功!
	</div>
	<script>
	alert(10);
	alert(20);
	</script>
</textarea>
<a href="javascript:yulan();" id="yulan">预览</a>
<a href="javascript:quanxuan();" id="quanxuan">全选</a>
<a href="javascript:fuzhi();" id="fuzhi">复制</a>
<script>
function yulan(){
	var temp = document.getElementById("code").value;
	var test = open("", "test","status=no,menubar=yes,toolbar=no");
	test.document.open();
	test.document.write(temp);
	test.document.close();
}
function quanxuan(){
	var temp = document.getElementById("code");
	temp.select();
}
function fuzhi(){
	var temp = document.getElementById("code").value;
	copyToClipboard(temp);
}
function copyToClipboard(txt) { 
	if (window.clipboardData) {
		window.clipboardData.clearData();
		window.clipboardData.setData("Text", txt);
		alert("已经成功复制内容到剪贴板,请任意粘贴!");
	} else if (navigator.userAgent.indexOf("Opera") != -1) {
		window.location = txt;
		alert("已经成功复制内容到剪贴板,请任意粘贴!");
	} else if (window.netscape) {
		try {
			netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
		} catch (e) {
			alert("您的firefox安全限制限制您进行剪贴板操作,请用ctrl+c复制!");
			return false;
		}
		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);
	}
}
</script>
</body>
</html>

都是转载扒拉的源码,但是已经测试过了,代码有效,在线演示地址:JS代码预览、全选、复制功能演示.html

文章信息

  • 发布日期:2014年08月12日 17:36:42
  • 固定地址:http://www.estorm.cn/notes/javascripts/2014-08-12/js-copy-select.html