js 复制文本内容

最新推荐文章于 2024-07-26 03:35:23 发布

潘潘91

最新推荐文章于 2024-07-26 03:35:23 发布

阅读量2.8k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/PanRuiFang/article/details/44595381

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

记录工作学习中的小技巧

复制网页中的内容到剪切板上；

本文介绍两种方式，都亲身验证过哦吐舌头

第一种：常规方法，但是只兼容IE浏览器与使用IE内核的浏览器。

优点是体积小，仅有十来行代码，但缺点也很明显，只支持IE及以IE为内核的浏览器。

js代码是：

$(function(){
	$("#txt_CopyLink").click(function(){
		var Url=$("#link_txt").val();
    	copyToClipboard(Url);
 	});
});
function copyToClipboard(maintext){
	if (window.clipboardData){
    	window.clipboardData.setData("Text", maintext);
	}else if (window.netscape){
  		try{
    		netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
		}catch(e){
    		alert("该浏览器不支持一键复制！n请手工复制文本框链接地址～");
		}
		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=maintext;
		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);
  	}
  	alert("以下内容已经复制到剪贴板nn" + maintext);
}

完整代码是：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<input type="text" value="http://www.bigaka.com" id="link_txt"/>
			<button id="txt_CopyLink">Copy</button>
		</div>
		<script src="js/jquery.js" type="text/javascript"></script>
		<script>
			$(function(){
				$("#txt_CopyLink").click(function(){
					var Url=$("#link_txt").val();
			    	copyToClipboard(Url);
			 	});
			});
			function copyToClipboard(maintext){
				if (window.clipboardData){
			    	window.clipboardData.setData("Text", maintext);
				}else if (window.netscape){
			  		try{
			    		netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
					}catch(e){
			    		alert("该浏览器不支持一键复制！n请手工复制文本框链接地址～");
					}
					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=maintext;
					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);
			  	}
			  	alert("以下内容已经复制到剪贴板nn" + maintext);
			}
		</script>
	</body>
</html>

第二种方法：插件+FLASH控件的方法–ZeroClipboard

ZeroClipboard给扒下来了，该插件能支持所有的浏览器，但是缺点也明显，首先要基于Jquery库，插件的个头也有10K，当然压缩后可以小一些，另外有一个FLASH控件，有可能在没装FLASH播放器的机器上控件不可用（但没装FLASH播放器的用户基本很少）

优点：兼容各浏览器
缺点:插件有10K大小，还需要引入一个Jqueyr的库。
如果不需要全浏览器的兼容，可以使用常规复制文本框内容的脚本

引入Jquery后再引入插件ZeroClipboard，同时下载 FLASH控件和JS文件放同一目录，在页面中添加执行的脚本。完整代码如下：

<!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<style type="text/css">
.line{margin-bottom:20px;}
/* 复制提示 */
.copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;margin:0 0 -20px -80px;background-color:rgba(0, 0, 0, 0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);padding:6px;}
.copy-tips-wrap{padding:10px 20px;text-align:center;border:1px solid #F4D9A6;background-color:#FFFDEE;font-size:14px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
</head>
<body>
<div class="line">
    <h2>demo1 点击复制当前文本</h2>
    <a href="#none" class="copy">点击复制我</a>
</div>
<div class="line">
    <h2>demo2 点击复制表单中的文本</h2>
    <a href="#none" class="copy-input">点击复制单中的文本</a>
    <input type="text" class="input" value="输入要复制的内容" />
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
/* 定义所有class为copy标签，点击后可复制被点击对象的文本 */
    $(".copy").zclip({
        path: "js/ZeroClipboard.swf",
        copy: function(){
        	console.log($(this).text());
        return $(this).text();
        },
        beforeCopy:function(){/* 按住鼠标时的操作 */
            $(this).css("color","orange");
        },
        afterCopy:function(){/* 复制成功后的操作 */
            var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ 复制成功</div></div>");
            $("body").find(".copy-tips").remove().end().append($copysuc);
            $(".copy-tips").fadeOut(3000);
        }
    });
/* 定义所有class为copy-input标签，点击后可复制class为input的文本 */
    $(".copy-input").zclip({
        path: "js/ZeroClipboard.swf",
        copy: function(){
        return $(this).parent().find(".input").val();
        },
        afterCopy:function(){/* 复制成功后的操作 */
            var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ 复制成功</div></div>");
            $("body").find(".copy-tips").remove().end().append($copysuc);
            $(".copy-tips").fadeOut(3000);
        }
    });
});
</script>