用心创造滤镜
扫码下载App
汇聚2000万达人的兴趣社区下载即送20张免费照片冲印
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
参数说明：text：复制文本button：复制按钮msg：复制后 alert 的内容
阅读(743)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'ZeroClipboard在ie9、ie10下不能使用的解决方法',
blogAbstract:'最近做了个
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}跨浏览器复制神器 ZeroClipboard 2.x快速入门详解
有些时候，我们希望让用户在网页上完成某个操作就能自动将指定的内容复制到用户计算机的剪贴板中。但是出于安全原因，大多数现代浏览器都未提供通用的剪贴板复制接口(或即便有，也默认被禁用)。只有IE浏览器可以通过如下方式来进行复制。window.clipboardData.setData(&Text&, &这里是需要复制的文本内容&)想要实现跨浏览器的复制功能，我们就可以使用 ZeroClipboard。ZeroClipboard 及其原理介绍ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard 的时候，它会悄悄隐藏一个小小的 Flash 影片(swf)，不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了。ZeroClipboard 中的 &Zero& 指的就是&不可见，零干扰&。不过从 Flash 10开始，由于浏览器和Flash的安全限制，要求用户必须在Flash区域上进行真实操作才能操作剪贴板。于是，ZeroClipboard 的作者想到一个办法：它将 Flash 做成透明的，以便于我们放在诸如链接、按钮等需要放置的任何地方。这样，用户界面看起来没有变化，当点击链接或按钮时，实际上点击是却是 Flash，从而实现复制操作。ZeroClipboard 快速入门使用 ZeroClipboard 的方法非常简单，我们只需要在页面中引入它的一个JS文件并稍作配置(最简单只需一行代码)即可(实际上还需要引入一个Flash的swf文件，不过 ZeroClipboard 会自动引入它)。请参考下面的示例代码：注意：这里介绍的是目前最新版 ZeroClipboard 2.1.6 的用法，2.x 版本均可参考，但 1.x 的用法与此并不相同！此外，由于 Flash 的安全限制，以下代码如果是在本地HTML文件中被浏览器直接打开，将无法正常工作。&!-- 这里是HTML代码部分 --&
&textarea id=&content& rows=&10& cols=&60&&这里是需要复制的内容&/textarea&
&input id=&copy& type=&button& data-clipboard-target=&content& value=&复制&&
&!-- 这里是JS代码部分 --&
&script type=&text/javascript& src=&///ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js& &&/script&
&script type=&text/javascript&&
// 将【复制】按钮充当复制数据的元素载体
var clip = new ZeroClipboard( document.getElementById(&copy&) );
&/script&以上就是引入并使用 ZeroClipboard 的最简代码。我们为【复制】按钮指定了data-clipboard-target属性，其值为将被复制数据的元素id。此时，我们点击【复制】按钮就可以复制id为content的textarea中的文本数据。你可以点击这里 ZeroClipboard 重要事项关于文件引入和本地化使用上面我们引入的JS文件是 ZeroClipboard 官方提供的 CDN，你可以直接使用。如果你想将其下载到本地服务器上使用，你可以进入下载最新版本。然后将dist目录下的ZeroClipboard.js(或者压缩版的ZeroClipboard.min.js)和ZeroClipboard.swf这两个文件上传到自己的服务器即可。请确保它们被放在同一目录下，以便于 ZeroClipboard.js 自动加载 ZeroClipboard.swf 文件。否则你需要在使用前额外配置swf文件的路径。// 在 new ZeroClipboard()之前，需要先配置 ZeroClipboard.swf 文件的路径
ZeroClipboard.config( { swfPath: 'http://YOURSERVER/path/ZeroClipboard.swf' } );多个复制载体如果你希望在页面中有多个按钮、链接等元素充当复制数据的载体，你可以以数组(或类数组)形式传入多个元素。以下几种方式都是可以的：// 方式一 (生成多个ZeroClipboard对象，适合不同载体复制不同来源的数据)
var clip = new ZeroClipboard( document.getElementById(&copy&) );
var clip2 = new ZeroClipboard( document.getElementById(&copy2&) );
// 方式二 (生成一个ZeroClipboard对象，适合不同载体复制相同来源的数据)
var doms = [ document.getElementById(&copy&), document.getElementById(&copy2&) ];
// var doms = document.getElementsByName(&copy&); // 通过ByName或ByTagName获取多个元素也是可以的
// var doms = $(&.copy&); // 通过jQuery对象也是可以的
// 只要是通过length属性访问元素个数、通过数字索引来访问DOM元素的对象都是可以的
var clip = new ZeroClipboard( doms );更改复制载体如果之前你使用【按钮1】来充当复制载体，现在你想添加【按钮2】来充当复制载体。你可以调用 ZeroClipboard 实例的clip()方法：var clip = new ZeroClipboard( document.getElementById(&copy&) );
// 添加id为copy2的元素作为复制载体，原来id为copy的元素依然可用
clip.clip( document.getElementById(&copy2&) /* 也可以数组形式传入多个 */
);如果你想要卸载指定的复制载体，你可以使用unclip()方法。// 取消id为copy2的元素上注册的复制功能
clip.unclip( document.getElementById(&copy2&) /* 也可以数组形式传入多个 */
// 不指定任何参数，则取消该对象之前在所有元素上注册的复制功能
clip.clip();设置用于复制的文本数据如果指定了data-clipboard-target属性，ZeroClipboard 将依次尝试通过该元素的value、textContent、innerText属性来获取文本数据(依次判断是否有上述属性，并以最靠前的属性为准)。当然，ZeroClipboard 也并非只能通过其他元素才能获得用于复制的文本数据，我们还可以给复制载体自身的data-clipboard-text属性来设置用于复制的文本数据，之后你还可以通过设置该属性值(setAttribute())来更改需要复制的文本内容。&input id=&copy& type=&button& data-clipboard-text=&这里是用于复制的内容，CodePlayer& value=&复制&&此外，我们甚至无需通过元素节点的属性来设置用于复制的文本数据，我们可以直接使用 ZeroClipboard 对象的setText()方法来设置文本数据。注意，该方法设置的数据是一次性的，使用该方法设置复制数据后，只在下一次复制操作时生效。之后即使你点击复制按钮也不再执行复制，除非你再次调用setText()方法(你可以绑定复制(&copy&)事件来调用该方法，从而实现每次复制操作都设置数据，下面我们会讲到)。clip.setText(&设置用于复制的文本内容&);数据来源的优先级问题：如果我们同时为复制载体设置了data-clipboard-text、 data-clipboard-target属性，并调用了setText()方法，那么 ZeroClipboard 复制数据的优先级是：setText() & data-clipboard-target & data-clipboard-text。如果前者没有文本数据(没有调用、 没有属性或者数据为空字符串)，则以下一个优先级为准，如果都没有文本数据，则不复制。举例来说，如果同时设置上述三者。第一次复制：先取setText()设置的数据，如果为空字符串，则取data-clipboard-target对应元素的数据；如果它也为空字符串，则取data-clipboard-text属性的文本数据；如果它也为空字符串，则不复制。注意，由于setText()设置的数据是一次性的，下一次复制将以data-clipboard-target属性为准(除非再次调用setText()方法)。数据类型众所周知，剪贴板中的数据是有类型的，每一种类型都可以有自己的数据。我们复制的数据可以有多种类型，当我们粘贴的时候，会粘贴当前程序可接受类型的数据。ZeroClipboard也支持设置多种类型的剪贴板数据。它为我们提供了setText()、setHtml、setRichText()方法分别用于设置纯文本数据、HTML内容、富文本内容。// 可同时设置，粘贴时根据接收程序的不同，而粘贴出不同的内容
clip.setText(&CodePlayer&);
clip.setHtml(&&strong&CodePlayer&/strong&&);
clip.setRichText(&{\\rtf1\\ansi\n{\\b CodePlayer}}&);此外，ZeroClipboard还提供了一个通用的设置方法setData()，用于设置各种类型的数据。// 可同时设置，粘贴时根据接收程序的不同，而粘贴出不同的内容
clip.setData(&text/plain&, &CodePlayer&);
clip.seData(&text/html&, &&strong&CodePlayer&/strong&&);
clip.setData(&application/rtf&, &{\\rtf1\\ansi\n{\\b CodePlayer}}&);事件处理ZeroClipboard 还为我们提供了事件支持，以便于处理ZeroClipboard触发的各种事件。ZeroClipboard支持的事件有&ready&、 &beforecopy&、 &copy&、 &aftercopy&、 &destroy&、 &error&。我们可以通过on()方法来注册事件处理函数。// 当Flash SWF文件加载完成并准备就绪时触发ready事件
clip.on(&ready&, function(){ alert(&加载完成!&); });
// 当触发copy事件时，设置用于复制的文本数据
clip.on(&copy&, function(e){
e.clipboardData.setData(&text/plain&, &这里是用于复制的纯文本数据&)
});此外，off()方法用来取消注册的事件处理函数，emit()方法用来手动触发事件。其用法与jQuery的on()、 off()、 trigger()方法非常相似。此外，如果你有多个ZeroClipboard对象，你想为它们都注册事件处理函数。你可以使用全局对象ZeroClipboard的静态方法ZeroClipboard.on()、 ZeroClipboard.off()、 ZeroClipboard.emit()来全局性地设置事件。全局事件将对每个对象都生效。关于事件处理的详细用法，请参考。ZeroClipboard 中文API文档
我们认为：用户的主要目的，是为了获取有用的信息，而不是来点击广告的。因此本站将竭力做好内容，并将广告和内容进行分离，确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信：只有给用户带来价值，用户才会给我们以回报。
打开导航菜单页面导航：
→ 正文内容 zeroclipboard 单个复制 多个复制
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
最近网站改版想让复制代码功能在多个浏览器上都可以实现，最近看网上不少说我们的代码复制功能不好用的，我们最近将会增加代码高亮等功能，希望大家多多支持我们
zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制，所以只要浏览器装有 Flash 就可以运行，而且比 IE 的 document.execCommand("Copy") 更加灵活。zeroclipboard下载地址：
zeroclipboard实现多浏览器复制到粘贴板功能（单个复制按钮和多个复制按钮） 为了更好的用户体验，现在很多网站中文本框的内容只需要点击复制按钮这样就能把内容复制到粘贴板了；
出于兼容性的考虑，基本上都是通过zeroclipboard来实现.首先要下载zeroclipboard，解压后把ZeroClipboard.js和ZeroClipboard.swf、ZeroClipboard10.swf(“为了flash10”)放到项目中，可以通过ZeroClipboard.setMoviePath( '/ZeroClipboard.swf' )方法来加载下面是整理的代码（也是通过 网上查找整理的）
（单个复制按钮）：
代码如下:&input type="text" value="text" id="copy_txt"/&&a href="javascirpt:;" id="copy_btn"&复制&/a&&script language="JavaScript"&&&& ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' );& //和html不在同一目录需设置setMoviePath&&& ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );&&& var clip = new ZeroClipboard.Client();&& //创建新的Zero Clipboard对象&&& clip.setText( '' ); // will be set later on mouseDown&& //清空剪贴板&&& clip.setHandCursor( true );&&&&& //设置鼠标移到复制框时的形状&&& clip.setCSSEffects( true );&&&&&&&&& //启用css&&& clip.addEventListener( 'complete', function(client, text) {&&&& //复制完成后的监听事件&&&&&&&&& alert("aa")&&&&& &&&&&&&&& clip.hide();&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 复制一次后，hide()使复制按钮失效，防止重复计算使用次数&&&& } );&& clip.addEventListener( 'mouseDown', function(client) {&&&&&&&&& clip.setText( document.getElementById('copy_txt').value );&&& } );&&& clip.glue( 'copy_btn' );&/script&
多个复制按钮：
代码如下:&input type="text" value="text" id="copy_txt0"/&&a href="javascirpt:;" id="copy_btn0" data='0' class="copyBtn"&复制&/a&&input type="text" value="text" id="copy_txt1"/&&a href="javascirpt:;" id="copy_btn1" data='1' class="copyBtn"&复制&/a&&input type="text" value="text" id="copy_txt2"/&&a href="javascirpt:;" id="copy_btn2" data='2' class="copyBtn"&复制&/a&&script language="JavaScript"&$(".copyBtn").each(function(i){&&&&&&& var id = $(this).attr('data');&&&&&&& var clip=&&&&&&& clip = new ZeroClipboard.Client();&&&&&&& ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' );& //和html不在同一目录需设置setMoviePath&&&&&&& ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );&&&&&&& clip.setHandCursor( true );&&&&&&& clip.setText( $("#copy_txt"+id).val() );&&&&&&& clip.addEventListener('complete', function (client, text) {&&&&&&&&& alert( "恭喜复制成功" );&&&&&&& });&&&&&&& clip.glue( 'copy_btn'+id);& });&/script&
注意： clip.setText( $("#copy_txt"+id).val() );如果是获取div中的内容， 一般用clip.setText( $("#copy_txt"+id).text() );或clip.setText( $("#copy_txt"+id).html() );
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910IE浏览器是支持网页复制功能的(window.clipboradData),但是其它浏览器是不允许直接访问剪切板的，IE的时代已经过去了，所以。。。ZeroClipboard利用透明的flash让其漂浮在复制按钮之上，将需要复制的内容传入flash，在通过flash的复制功能把传入的内容复制到剪切板。只要你的浏览器支持Flash即可，需要说明的是ZeroClipboard是原生js写的，非jquery插件。首先来看看简单Demo:&html&
&title&PHP点点通()演示教程&/title&
&style type="text/css"&
&script type="text/javascript" src="ZeroClipboard.js"&&/script&
&script src="/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"&&/script&
$(function(){
//创建对象，确保ZeroClipboard.swf和ZeroClipboard.js在同一个目录下，否则通过ZeroClipboard.setMoviePath( &Flash路径& )设置swf地址
clip = new ZeroClipboard.Client();
clip.setHandCursor(true); //设置鼠标手型
clip.setText($("#clip_content").text());
//复制的文本
clip.glue( 'copy_button' ); //注册id按钮，可以是其它非input元素
&div id="clip_content"&PHP点点通()演示教程&/div&
&button id="copy_button"&点击复制&/button&
简单使用步骤上面说明已经很明确，看看给我们提供的方法：1、reposition() 方法因为按钮上漂浮有一个 Flash 按钮，所以当页面大小发生变化时，Flash 按钮可能会错位，这样就点不着了。 Zero Clipboard 提供了一个 reposition() 方法，可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上。如下面代码是在jQuery下实现的resize事件重新设置按钮位置：$(window).resize(function(){&& clip.reposition();});2、hide() 和 show() 方法这两个方法可以隐藏和显示 Flash 按钮 。其中 show() 方法会调用 reposition() 方法。3、setCSSEffects() 方法当鼠标移到按钮上或点击时，由于有 Flash 按钮的遮挡，所以像 css &:hover&, &:active& 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类，比如：#copy-botton:hover{border-color:#FF6633;}// 可以改成下面的 ":hover" 改成 ".hover"#copy-botton.hover{border-color:#FF6633;}我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理：将类 .hover 当成伪类 :hover 。4、getHTML() 方法如果你想自己实例一个 Flash ，不用 Zero Clipboard 的附着方法，那么这个方法就可以帮上忙了。它接受两个参数，分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如：var html = clip.getHTML( 150, 20 );你可以用 innerHTML 或直接 document.write(); 进行输出。以下是测试输出的组装完毕的HTML 代码：&embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="/go/getflashplayer" flashvars="id=1&width=150&height=20" wmode="transparent" /&IE 的 Flash JavaScript 通信接口上有一个 bug 。你必须插入一个 object 标签到一个已存在的 DOM 元素中。并且在写入 innerHTML 之前请确保该元素已经 appendChild 方法插入到 DOM 中。Zero Clipboard 事件处理Zero Clipboard 提供了一些事件，你可以自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 &load& 。clip.addEventListener( "load", function(client) {&&& alert("Flash 加载完毕！");});Zero Clipboard 会将 clip 对象作为参数传入。即上例中的 &client& 。还有 &load& 也可以写成 &onLoad&，其他的事件也可以这样。其他事件还包括：mouseOver 鼠标移上事件mouseOut 鼠标移出事件mouseDown 鼠标按下事件mouseUp 鼠标松开事件complete 复制成功事件其中 mouseOver 事件和 complete 事件比较常用。前面说过，如果需要动态改变待复制的内容，那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值，我们可以在鼠标 over 的时候重新设置值。clip.addEventListener( "mouseOver", function(client) {&&& var test = document.getElementById("test");&&& client.setText( test.value ); // 重新设置要复制的值});//复制成功：clip.addEventListener( "complete", function(){&&& alert("复制成功！");});
本地下载：下载地址：
关注微信公众平台