方法一：window.clipboardData
由window提供的clipboardData对象提供了对于预定义的剪贴板格式的访问。该对象只在IE下有效，传说ie7，与ie8 对网页有个复制的权限，需在“安全”中的“自定义级别”的脚本中设置，在下没有试过。
| 方法 | 描述 |
|---|---|
| clearDatas(dataFormat) | 删除剪贴板中指定格式的数据。 |
| getData(dataFormat) | 从剪贴板获取指定格式的数据。 |
| setData(dataFormat, data) | 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。 |
<!doctype html>
<html>
<head>
<meta charset='utf-8'/>
<script language="javascript">
function readTxt() {
alert(window.clipboardData.getData("text"));
}
function setTxt() {
var t=document.getElementById("txt");
t.select();
window.clipboardData.setData('text',t.createTextRange().text);
}
function clearTxt() {
window.clipboardData.clearData('text');
}
function oCopy(obj){
obj.select();
js=obj.createTextRange();
js.execCommand("Copy")
alert("复制成功!");
}
</script>
</head>
<body>
<input id="txt" value="测试">
<input type="button" value="复制" οnclick="setTxt()">
<input type="button" value="读取" οnclick="readTxt()">
<input type="button" value="清空" οnclick="clearTxt()">
<input οnclick="oCopy(this)" value="你好.要copy的内容!">
</body>
</html>方法二：使用插件
1、ZeroClipboard
ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard 的时候，它会悄悄隐藏一个小小的 Flash 影片(swf)，不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了。ZeroClipboard 中的 "Zero" 指的就是"不可见，零干扰"。
不过从 Flash 10开始，由于浏览器和Flash的安全限制，要求用户必须在Flash区域上进行真实操作才能操作剪贴板。于是，ZeroClipboard 的作者想到一个办法：它将 Flash 做成透明的，以便于我们放在诸如链接、按钮等需要放置的任何地方。这样，用户界面看起来没有变化，当点击链接或按钮时，实际上点击是却是 Flash，从而实现复制操作。
注意：这里介绍的是2.x版本的ZeroClipboard，但1.x的用法与此并不相同，2.x原则上不兼容IE6~IE8等低版本浏览器，如果需要兼容，请使用1.x或2.0.2版本（详情参考官方链接），推荐使用2.0.2。
此外，由于 Flash 本地沙箱的安全限制，以下代码如果是在本地HTML文件中被浏览器直接打开，将无法正常工作，需要在服务器环境下使用。
<!DOCTYPE html>
<html>
<head>
<title>Zero Clipboard Test</title>
<meta charset="utf-8">
</head>
<body>
<!--
说明：
1.data-clipboard-target 输入要复制的对象的ID
-->
<button id="clip_button" data-clipboard-target="copy_text">复制到剪贴板</button>
<br/>
<textarea id="copy_text" cols="50" rows="3">输入需要复制的内容</textarea>
</body>
</html>
<script type="text/javascript" src="ZeroClipboard.min.js"></script> <!--注意引用位置不能放在head元素中，会无法获取body或window-->
<script type="text/javascript">
// 定义一个新的复制对象
var clip = new ZeroClipboard( document.getElementById("clip_button"), {
moviePath: "ZeroClipboard.swf"
} );
// 复制内容到剪贴板成功后的操作
clip.on( 'complete', function(client, args) {
alert("复制成功，复制内容为："+ args.text);
} );
</script>
官方github地址下载源码：https://github.com/zeroclipboard/zeroclipboard
2、jquery.zclip
jQuery ZeroClipboard是在ZeroClipboard的基础上进行的改良，简称zclip，插件需要Flash的支持，作为jQuery的API，jquery.zclip也表现的非常简易操作。
此外，由于 Flash 本地沙箱的安全限制，以下代码如果是在本地HTML文件中被浏览器直接打开，将无法正常工作，需要在服务器环境下使用。
<!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.zclip.js"></script>
</head>
<body>
<div>
<h2>demo1 点击复制当前文本</h2>
<a href="#none" class="copy">点击复制我</a>
</div>
<div>
<h2>demo2 点击复制表单中的文本</h2>
<a href="#none" class="copy-input">点击复制单中的文本</a>
<input type="text" class="input" value="输入要复制的内容" />
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
/* 定义所有class为copy标签，点击后可复制被点击对象的文本 */
$(".copy").zclip({
path: "ZeroClipboard.swf",
copy: function(){
return $(this).text();
},
beforeCopy:function(){/* 按住鼠标时的操作 */
$(this).css("color","orange");
},
afterCopy:function(){/* 复制成功后的操作 */
alert('复制成功');
}
});
/* 定义所有class为copy-input标签，点击后可复制class为input的文本 */
$(".copy-input").zclip({
path: "ZeroClipboard.swf",
copy: function(){
return $(this).parent().find(".input").val();
},
afterCopy:function(){/* 复制成功后的操作 */
alert('复制成功');
}
});
});
</script>值得注意的是如果是复制的内容来自输入框input、textarea等，copy对象使用：
copy: function(){
return $(this).text();
},如果是复制的内容来自页面元素div、p之类的，copy对象使用：
copy: $('#mytext').text();参数说明
path：swf调用路径，必须，如js/ZeroClipboard.swf。
copy：复制的内容，必须，任意字符串，也可以是回调函数返回的内容
beforeCopy：复制内容前回调函数，可选
afterCopy：复制内容后回调函数，可选
常见问题 http://www.bubuko.com/infodetail-1072009.html
总结：
从上面独立的js库ZeroClipboard.js和jquery.zclip.js 都是采用flash实现实现复制到剪贴板的功能，可以看出，使用ZeroClipboard.js带来功能相对比较少，不过它是独立的库，文件比较小，而使用jquery.zclip.js后的功能是比较丰富，不过对于不使用jQuery框架的站点来说，采用jquery.zclip.js是比较浪费宽带。使用哪种复制方式还是得看产品的具体定位情况~
jquery.zclip和ZeroClipboard 两个需要在服务器环境下使用，但在bootstrap的隐藏标签（tab-pane fade 不带 in active）下有bug，在django的模板继承下（{% xx block %}{% endblock %}）也有bug，下面介绍的clipboard.js整体来说比较好用，调用相当简单，github源码里面有demo，也很稳定没有出现以上两种问题，功能有复制剪贴还可以复制自定义字符串到剪贴板。
3、clipboard.js
clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function-text</title>
</head>
<body>
<!-- 1. Define some markup -->
<button class="btn">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn', {
text: function() {
return 'to be or not to be';
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-input</title>
</head>
<body>
<!-- 1. Define some markup -->
<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
以上三种插件都用过，感觉还是比较喜欢最后介绍的 clipboard.js，用法简单清晰明了，功能多样，完全满足一般日常使用，官方代码自带demo，涵盖每种用法，还不依赖flash，支持主流浏览器，老版IE可以进行判断结合clipboardData使用。
扫一扫
1364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
