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({

<span style="white-space:pre">	</span>path: "../plugins/js/ZeroClipboard.swf",

<span style="white-space:pre">	</span>copy: function () {<span style="white-space:pre">	</span>//复制内容 

<span style="white-space:pre">		</span>return $("#url").text();

<span style="white-space:pre">	</span>},

<span style="white-space:pre">	</span>afterCopy: function () {//复制成功 

<span style="white-space:pre">		</span>alert("已复制到剪贴板");

<span style="white-space:pre">	</span>}

});
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(254, 254, 242);">其中path是ZeroClipboard.swf在项目中的路径位置,afterCopy可选。</span>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值