一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

javascript弹层提示的复制内容剪切板功能(复制插件)

时间:2014-04-11 编辑:简简单单 来源:一聚教程网

然后造轮子的路上是痛苦的, 各种兼容问题, 各种事件, 哎, 也罢, 最终也成了... 感谢 张鑫旭 - js+flash(as3)实现复制文字 让我有的思路...

看一下效果图

目前测试兼容ie6+,谷歌,火狐等...当然我是用ietester测的... 有问题直接联系我吧.. 谢谢

当前接口API:

 代码如下 复制代码

/**
 * 复制文字
 * 突然觉得不知道用空间是对还是错...
 * @todo 要做显示,隐藏的接口
 * @example
 *     1, 单个节点复制
 *         msc.tools.copy({
 *            id:"#id",
 *            str:"要复制的内容"
 *        });
 *    
 *     2, 多个节点复制
 *         msc.tools.copy({
 *             id:"#id .copy",
 *             copy:"111"
 *         });
 *     3, 动态获取值
 *         msc.tools.copy({
 *             id:"#id",
 *             copy:function(){
 *                 return this.getAttribute("data-value");//this为当前的dom
 *             }
 *         });
 *     4, 外部设置内容
 *         msc.tools.copy({
 *             id:"#text"
 *         });
 *
 *         msc.tools.copy("#text", "我要复制") === msc.tools.copy({id:"#test", str:"我要复制"})
 *     5, 移除实例
 *         msc.tools.copy.remove(str||ele||jquery);//支持移除数组对象
 *     6, 配置参数
 *         config.id 选择器, 支持多个, dom,jquery,str
 *         config.str 要复制的内容, 支持fn, this指向当前的dom
 *         config.path swf路径
 *         config.success 成功回调, 回调参数为复制的内容, this指向当前的dom
 *         config.mouseover, mouseout, mousedown, mouseup 四个事件, this指向当前的dom
 *
 *
 */

完整例子

 

 

 代码如下 复制代码




   
    复制组件 - 谢亮

   


   
   
   


       

           
                     
           
           

               

谢亮复制组件, 目测是支持ie6+


               


                    感谢以下作者的源码提供思路:
               


               


                    zclip | 张鑫旭 - js+flash(as3)实现复制文字内容到剪切板
               


               


                    如有bug, 请联系 qq463004799, 目前为公司组件, 优化代码后会公开(当然你现在也可以用, 只是...)
               


               


                    下面来看看吧...
               

               


                   

                       

多个复制


                   

               

               

                   


                        测试1
                        测试2
                        测试3
                   


                   


                        注: 以上复制他们的innerHTML
                   


               

               


                   

                       

一个复制


                   

               

               

                   


                        学习吧, 嘎嘎
                   


                   


                        复制
                   


                   


                        注: 以上复制固定的内容:  学习吧
                   


               

               


                   

                       

外部动态复制


                   

               

               

                   

                       

                               

  •                                

                                        复制下面框框里的
                                   

                               

  •                            

  •                                
                                   

                                       
                                   

                               

  •                        

                   

               


               


                   

                       

事件机制


                   

               

               

                   

                       

                               

  •                                

                                        来试试吧
                                   

                               

  •                            

  •                                
                                   

                                       
                                   

                               

  •                        

                   

               

               


                   

                       

移除事件


                   

               

               

                   

                       

                               

  •                                

                                        复制
                                   

                               

  •                            

  •                                

                                        把复制干掉
                                   

                               

  •                        

                   

               

 

               


                   

                       

外部按钮设置复制内容


                   

               

               

                   

                       

                               

  •                                

                                        复制
                                   

                               

  •                            

  •                                

                                        设置内容为 谢亮+0
                                   

                               

  •                        

                   

               

               
               

               

           


           

       


   

   






 

 

热门栏目