您的位置：首页 > 其它

在浏览器中实现复制内容到剪切板中

2016-06-21 14:03 465 查看

前言

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

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

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

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

在IE中的实现

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

直接看实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script>
function copyToClipboard() {
var svalue = document.getElementById("textInput").value;
window.clipboardData.setData("Text", svalue);
}
</script>
</head>
<body>
<input type="text" id="textInput" />
<input type="button" value="Copy Text" onclick="copyToClipboard()" />
</body>
</html>

在非IE 浏览器的实现

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

可以到

http://zeroclipboard.org/

下载，下载之后主要使用

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

还是看一个简单的例子：

<!DOCTYPE html>
<html>
<head>
<title>Zero Clipboard Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="../lib/ZeroClipboard.js"></script>
</head>
<body>
<button id="copy-button" data-clipboard-text="Copy Me!"
title="Click to copy me." data-clipboard-target="fe_text">Copy
to Clipboard</button>

<textarea id="fe_text" cols="50" rows="3">Input Copy Text</textarea>

<script type="text/javascript">
var client = new ZeroClipboard(document.getElementById("copy-button"));

client.on("ready", function(readyEvent) {
client.on("aftercopy", function(event) {
alert("Copy Success. " + event.data["text/plain"]);
});
});
</script>
</body>
</html>

说明一下：

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 中的使用

如果使用的是Extjs 的框架的话，一般状况下是在menuitem 上需要这种功能,就可以使用如下方式定义menu item

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.");
});
});
}
}
});

原理就是在menuitem ready 之后，替换menuitem 的html.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航