读书人

ZeroClipboard.js需要点击两次才复制成

发布时间: 2013-08-14 14:27:55 作者: rapoo

ZeroClipboard.js需要点击两次才复制成功的问题?
从网上找了一个用ZeroClipboard的例子,在服务器上远程访问,可以使用,代码如下:

<script type="text/javascript" src='http://code.jquery.com/jquery.js'></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script>
$(function(){

//选中代码
$('.txt_code').click(function(){
$(this).select();
});

//设置swf路径
ZeroClipboard.setMoviePath("ZeroClipboard.swf");
//创建对象
var clip = new ZeroClipboard.Client();
//设置手型
clip.setHandCursor(true);
//绑定按钮
clip.glue('btn_copy');
//复制内容
clip.addEventListener( "mouseOver", function(client) {
client.setText($('.txt_code').val());
});
//复制成功后的提示
clip.addEventListener( "complete", function(){
alert("copyed successful");
});

});
</script>
<textarea class='txt_code'>sssssssssss</textarea>
<input type='button' value='copy' id='btn_copy' />

因为要用在一个页面有多个需要复制的地方,于是就把上述代码改了下,封装成一个函数。代码如下:
<script type="text/javascript" src='http://code.jquery.com/jquery.js'></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script>
function fcopy(){

// //选中代码
// $('.txt_code').click(function(){
// $(this).select();
// });

//设置swf路径
ZeroClipboard.setMoviePath("ZeroClipboard.swf");
//创建对象
var clip = new ZeroClipboard.Client();
//设置手型
clip.setHandCursor(true);
//绑定按钮
clip.glue('btn_copy');
//复制内容
clip.addEventListener( "mouseOver", function(client) {
client.setText($('.txt_code').val());
});
//复制成功后的提示


clip.addEventListener( "complete", function(){
alert("copyed successful");
});

}

</script>

<textarea class='txt_code'>sssssssssss</textarea>
<input type='button' onclick="fcopy()" value='copy' id='btn_copy' />


这时候再运行,发现初次复制成功需要点击两次才可以,后面的一次点击就可以了。
谁知道这个怎么解决?又是因为什么原因呢? ZeroClipboard
[解决办法]
页面打开后,第一次点复制不成功(这时ZeroClipboard.js,jquery)加载完成了吗
[解决办法]
因为第一次点击执行了fcopy()后才绑定了zeroclipboard,所有只有下一次点击才会执行复制

反正你用的jquery,还不如直接用jquery的插件jquery.zclip.js jquery剪贴板插件

读书人网 >JavaScript

热点推荐