jQuery实现复制到剪切板

前段时间需要做一个点击一个按钮,把制定内容复制到剪切板的效果。

对于IE浏览器而言,有一简单的方法,通过 window.clipboardData:

(假如有一个id为copy的按钮,有一个id为name的输入框,“text”为固定格式)

$("#copy").click(function () {
  window.clipboardData.setData("text", $("#name").val());
  alert("已复制到剪贴板");
});

 


但是这个方法仅限于IE浏览器,其他浏览器使用不了,所以不推荐使用。

下面介绍一种兼容主流浏览器的方法:jQuery的zclip插件。

1、首先下载一个一个zclip插件,网上有很多下载资源,随便百度一个,里面主要有两个文件:jquery.zclip.min、ZeroClipboard.swf。(注意两个都要导入进去)

2、把这两个文件都放都项目中去,同时引用js例如:<script src="../plugins/js/jquery.zclip.min.js"></script>(我的js文件都放在根目录下的plugins文件下的js文件中)

3、下面模拟具体代码:

<a href="www.baidu.com" id="url">www.baidu.com</a>
<input type="button" value="复 制" id="copy" /> 

点击“复制”按钮:

$("#copy").zclip({
path: "../plugins/js/ZeroClipboard.swf",
copy: function () {//复制内容 
return $("#url").text();
},
afterCopy: function () {//复制成功 
alert("已复制到剪贴板");
}
});

其中path是ZeroClipboard.swf在项目中的路径位置,afterCopy可选。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。