js实现复制到剪切板功能，兼容所有浏览器

最新推荐文章于 2022-06-08 15:39:59 发布

Gif_T_T

最新推荐文章于 2022-06-08 15:39:59 发布

阅读量1.8k

点赞数

分类专栏：前端

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Zero Clipboard的官方地址：http://zeroclipboard.org/，github地址：https://github.com/zeroclipboard/ZeroClipboard

使用它需要搭建服务器环境，可能有同学不太清楚，关于搭建服务器环境的，方法有很多，如xp或者win7系统自带的IIS，也可以使用xampp、appserv、APMServ等集成包，安装即可，搭建起来非常简单，这里不做介绍~

现在我们先使用独立的js库Zero Clipboard简单实现复制到剪贴板功能，demo如下：

<!DOCTYPE html>
<html>
<head>
<title>Zero Clipboard Test</title>
<meta charset="utf-8">
</head>
<body>
<!-- 
    说明：
    1.data-clipboard-target 输入要复制的对象的ID
-->
<button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b>复制到剪贴板</b></button>
<br/>
<textarea id="fe_text" cols="50" rows="3">输入需要复制的内容</textarea>
</body>
</html>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
// 定义一个新的复制对象
var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
  moviePath: "ZeroClipboard.swf"
} );

// 复制内容到剪贴板成功后的操作
clip.on( 'complete', function(client, args) {
   alert("复制成功，复制内容为："+ args.text);
} );

</script>

demo下载（温馨提示：下载代码的同学，浏览demo时记得使用服务器环境，不然看不到效果的~）

上面代码注释中已经对Zero Clipboard的功能进行了介绍，需要了解更多的功能请到https://github.com/zeroclipboard/ZeroClipboard

出处： http://www.cnblogs.com/PeunZhang/p/3324727.html

Gif_T_T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现复制到剪切板功能，兼容所有浏览器

Zero Clipboard的官方地址：http://zeroclipboard.org/，github地址：https://github.com/zeroclipboard/ZeroClipboard使用它需要搭建服务器环境，可能有同学不太清楚，关于搭建服务器环境的，方法有很多，如xp或者win7系统自带的IIS，也可以使用xampp、appserv、APMServ等集成包，安装即可，搭
复制链接

扫一扫

专栏目录