本文共 1419 字，大约阅读时间需要 4 分钟。

前言

前端开发时， 经常有这种功能， 需要把网页中的有些内容复制到剪切板中。

针对IE浏览器来说， 实现起来就很简单， 因为直接有clipboardData 的对象可以使用，

但是对于其他浏览器来说， 并没有这个对象， 如何实现， 目前比较多的解法都是借助flash。

除此之外，这个功能如果应用在Extjs 中该如何实现。（目前为止， Extjs 本身并没有提供相关的方法）

在IE中的实现

在IE中实现起来就很简单， 使用 window.clipboardData 这个对象的setData 方法就可以了。

直接看实例：

在非IE 浏览器的实现

网络上提供的使用flash解法也比较多, 常用的是 zeroclipboard.

可以到 

下载， 下载之后主要使用 

ZeroClipboard.js 和 ZeroClipboard.swf 文件。 将这两个文件放在同一目录下，

还是看一个简单的例子：

   	Copy		to Clipboard	Input Copy Text	

1. ZeroClipboard 这个js 对象就是用来做复制剪切板的作用的， 构造时传入一个触发的元素就可以了（document.getElementById("copy-button")）

2. 以上的 “copy-button”的按钮， 需要指定它copy  什么数据，以下方式可以2选1 

      1）data-clipboard-text， 直接指定需要Copy 的值

     2） data-clipboard-target， 需要Copy 元素的值的Id

3. 可以给构造的对象添加一些事件函数， 例如ready, aftercopy

适合所有浏览器的方式

要使用所有浏览器， 只需要把以上两种方式汇总一下就可以了， 这里就不多介绍了。

在Extjs 中的使用

var CopyLinkAction = Ext.create('Ext.menu.Item', {		text : 'Copy Link',		listeners : {			afterrender : function(comp, eOpt) {				var el = comp.getEl().dom;				var clip = new ZeroClipboard(el);								clip.setData("text/plain", "your data");				clip.on("ready", function(readyEvent) {					// alert( "ZeroClipboard SWF is ready!" );					clip.on("aftercopy", function(event) {						// alert("Copy Success. " + event.data["text/plain"] );						alert("Copy Link Success.");					});				});			}		}	});

转载地址：https://oscar.blog.csdn.net/article/details/51726684 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！