温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

点击按钮复制文本内容 -- jquery Zclip -- Zero Clipboard

发布时间:2020-07-03 10:44:29 来源:网络 阅读:1691 作者:xiaobingli_luo 栏目:web开发

今天,经理让我做一个功能,复制文本框中的代码.以前在其他网站上经常见到过这个功能.只不过没有细细研究,今天也是个机会.

这里我使用的事jquery的zeroclipboard来实现复制功能.代码内容很简单,网上也有很多资料.


Zero Clipboard作为一个独立的js库,它利用 Flash 进行复制,需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 。


具体实现如下:


jsp页面:

 <p>
	                                    	<textarea class="h200"  id="jscode">
<!--Ad Survey 广告加载基础代码-->
<script type="text/javascript" src="http://ipengtai.huanqiu.com/resource/js/base.js">
</script>                                    	
	                                    	</textarea>
	                                    </p>
	                                    <div class="btn_blank floatL MT10">
	                                    	<a href="javascript:void(0)" id="jscodeCopy">复制代码</a>
	                                    </div>

js代码:

$("#jscodeCopy").zclip({
        path:'../../../js/pub/media/adPos/ZeroClipboard.swf', //记得把ZeroClipboard.swf引入到项目中 
        copy:function(){
            return $('#jscode').val();
        },
        afterCopy:function(){// 复制成功后的操作
        	$("#jscopyResult").show().html("复制代码成功");
        	$("#htmlcopyResult").hide();
        }
    });


对,就这简简单单的两行,问题就解决了.

不过我在查找解决这个问题的时候,可没有这么简单.首先我们来看看这中间遇到的问题.

  1. 第一个问题也是纠结时间最长的一个问题.这段代码不能够在本地环境下运行,必须要部署到服务器上.我测试jquery代码的时候,习惯现在本地测试,成功后才会转嫁到项目代码中.这次吃亏了,这个jquery方法必须在服务器环境下才能运行得到正确的结果,因为浏览器对flash文件的限制.(由于游览器对 Flash 的安全措施, 请不要在本地 file:/// 下进行调试, 你会发现效果始终不会出现, 请通过 http:// 方式运行)


  2. zclip()方法无效:不管怎么样,程序就是进不来这个方法.多次尝试,发现当copy函数只返回一句话的时候,afterCopy只返回一句话的时候,该函数才生效.


  3. 第二个问题,同时也是第三个问题.为什么copy里不能做更多的逻辑判断,写更多的代码呢?多写一个alert();都得不到想要的结果.


  4. 第四个问题,这个问题也很头疼.我在同一个页面,有三个地方需要使用到复制粘贴.头两个都没有问题.但第二个和第三个就有问题了.需求是这样的:if(条件一){显示按钮二}else if(条件二){显示按钮三}.也就是其实我这第二个和第三个按钮同时只显示一个.问题就在这里.无论点击那个按钮,执行的复制操作都是第二个按钮的.这里我猜了一下原因:这个flash按钮是按照顺序进行匹配的.也就是是说:第二个按钮显示的时候,点击按钮,执行的是第二组复制功能.而第三个按钮显示的时候(其实也对于页面来说也是第二个显示按钮,因为第二个隐藏了),点击按钮,执行的也是第二组复制功能.


  5. 这一点是第二天补充的:昨天就差一点点,没有提到这个问题,今天早上就是一上午的时间啊.隐藏的div中,不能正确加载出flash按钮.这个问题真的是无语了, 搞了好久了.继续找答案. 有哪位大侠知道答案,请指点在下,不胜感激.

    点击按钮复制文本内容  -- jquery Zclip  -- Zero Clipboard

    这个问题经过一上午的激战,终于解决了,解决的方法是如此的简单.你不是弹出div么,在弹出div以后重新加载一下这个方法就可以啦.点击按钮复制文本内容  -- jquery Zclip  -- Zero Clipboard点击按钮复制文本内容  -- jquery Zclip  -- Zero Clipboard



  6. 待用



以上是我在做的过程中遇到的问题. 以后慢慢把这些问题解决,在回过头来补充.


---------------------------------------------------------------------------------------

这个zeroclipboard方法,在获取文本框内容和获取div内容时的方式是不一样的.下面我们看一下代码:

参考:http://www.sunzhenghua.com/jquery-zclip-zeroclipboard-copy-paste-demo


$(document).ready(function(){
 
    $('#copy-button').zclip({
        path : 'ZeroClipboard.swf',
        copy : $('#content').text()
    });
     
    // 复制的内容时div,p标签时,使用上述方式获取
     
    $('#copy-dynamic').zclip({
        path : 'ZeroClipboard.swf',
        copy : function(){
                   return $('input#dynamic').val();
               }
    });
     
    // 复制的内容为input,textarea表单输入框时,使用第二种方式获取
});

在这片文章里说:该插件同样支持回调函数


$(document).ready(function(){
 
    $("#copy-callback").zclip({
        path : 'ZeroClipboard.swf',
        copy : $('#callback-paragraph').text(),
        beforeCopy:function(){        // 复制的内容之前,将文字颜色置为×××
            $('#callback-paragraph').css('background','yellow');
            $(this).css('color','orange');
        },
        afterCopy:function(){  // 复制完成之后,文字的颜色设置为粉色
            $('#callback-paragraph').css('background','pink');
            $(this).css('color','purple');
        }
    });
 
});



--------------------------------------------------------------------------------------

最后,看一下效果吧:


1. 首先引入文件:

点击按钮复制文本内容  -- jquery Zclip  -- Zero Clipboard

点击按钮复制文本内容  -- jquery Zclip  -- Zero Clipboard


2. 看一下代码


只是复制按钮背flash按钮罩住

点击按钮复制文本内容  -- jquery Zclip  -- Zero Clipboard


看js代码实现复制功能.

点击按钮复制文本内容  -- jquery Zclip  -- Zero Clipboard




向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI