点击按钮复制功能

gentle@xue

于 2016-12-17 15:19:06 发布

阅读量804

点赞数

CC 4.0 BY-SA版权

文章标签：链接

本文链接：https://blog.youkuaiyun.com/sinat_32325205/article/details/53707789

本文介绍了一种利用ZeroClipboard库实现网页链接复制的方法。通过简单的HTML与JavaScript结合，可以轻松地让页面上的按钮具备复制指定链接的功能。文章提供了详细的步骤说明及代码示例。

1.第一步。

引入ZeroClipboard.js。ZeroClipboard.swf
2.html代码
<a href="javascript:void(0);" id="copy"><i>复制链接</i></a>

<!--添加内容end-->
<div id="_flashDiv"></div>
3.js实现复制功能。
function portalUrlCopyEvent(clickBtn, copyDiv, copyURL) {
ZeroClipboard.setMoviePath("/ZeroClipboard.swf");
var clip = new ZeroClipboard.Client(); // 新建一个对象
clip.setHandCursor(true);
clip.setText(copyURL); // 设置要复制的文本。
clip.addEventListener("mouseUp", function () {
    alert("复制成功");
});
// 注册一个 button，参数为 id。点击这个 button 就会复制。
//这个 button 不一定要求是一个 input 按钮，也可以是其他 DOM 元素。
clip.glue(clickBtn, copyDiv); // 和上一句位置不可调换
$(window).resize(function () {
    clip.reposition();
});
}
$(function(){
portalUrlCopyEvent("copy","_flashDiv","www.baidu.com");
})