方法一: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="复制" onclick="setTxt()">
- <input type="button" value="读取" onclick="readTxt()">
- <input type="button" value="清空" onclick="clearTxt()">
- <input onclick="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>
以上是简单应用,详细介绍请移驾:
http://www.365mini.com/page/zeroclipboard-2_x-quick-start.htm
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>
以上列出两种常用使用方式demo,更多demo参见官方源码:
https://github.com/zenorocha/clipboard.js以上三种插件都用过,感觉还是比较喜欢最后介绍的clipboard.js,用法简单清晰明了,功能多样,完全满足一般日常使用,官方代码自带demo,涵盖每种用法,还不依赖flash,支持主流浏览器,老版IE可以进行判断结合clipboardData使用。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。