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

然后造轮子的路上是痛苦的, 各种兼容问题, 各种事件, 哎, 也罢, 最终也成了... 感谢 张鑫旭 - 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
 *
 *
 */

完整例子

 

 

 代码如下 复制代码

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复制组件 - 谢亮</title>
<meta name="keywords" content="">
<meta name="description" content="" />

<link rel="shortcut icon" href="http://static.meishichina.com/v6/favicon.ico"/>

<link rel="stylesheet" type="text/css" href="http://homecp.meishichina.com/v6/css/??lib/reset.css,lib/bar.css,lib/goTop.css,lib/ui-common.css,app/my_center.css?20140409">

    <style type="text/css">
        .demo_title{margin-top:20px;}
        .demo_box{padding:20px;background-color:#ccc;}
    </style>
</head>
<body>
   
    <!-- 主框架 -->
    <div class="wrap">
        <div class="w clear mod">
           
                     
            <!-- 右侧 -->
            <div class="" id="J_demo">
                <h1 style="font-size:22px;line-height:30px;font-weight:400;">谢亮复制组件, 目测是支持ie6+</h1>
                <p>
                    感谢以下作者的源码提供思路:
                </p>
                <p>
                    <a href="http://www.steamdev.com/zclip/" target="_blank">zclip</a> | <a href="http://www.zhangxinxu.com/wordpress/2010/08/jsflashcs3%E5%AE%9E%E7%8E%B0%E5%A4%8D%E5%88%B6%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E5%88%B0%E5%89%AA%E5%88%87%E6%9D%BF/" target="_blank">张鑫旭 - js+flash(as3)实现复制文字内容到剪切板</a>
                </p>
                <p>
                    如有bug, 请联系 qq463004799, 目前为公司组件, 优化代码后会公开(当然你现在也可以用, 只是...)
                </p>
                <p class="mt20">
                    下面来看看吧...
                </p>

                <div class="ui_title demo_title">
                    <div class="ui_title_wrap">
                        <h2>多个复制</h2>
                    </div>
                </div>
                <div class="demo_box" id="demo_1">
                    <p>
                        <a href="#" class="ui_btn_blue">测试1</a>
                        <a href="#" class="ui_btn_blue">测试2</a>
                        <a href="#" class="ui_btn_blue">测试3</a>
                    </p>
                    <p>
                        注: 以上复制他们的innerHTML
                    </p>
                </div>

                <div class="ui_title demo_title">
                    <div class="ui_title_wrap">
                        <h2>一个复制</h2>
                    </div>
                </div>
                <div class="demo_box" id="demo_2">
                    <p>
                        学习吧, 嘎嘎
                    </p>
                    <p>
                        <a href="#" class="ui_btn_blue">复制</a>
                    </p>
                    <p>
                        注: 以上复制固定的内容:  学习吧
                    </p>
                </div>

                <div class="ui_title demo_title">
                    <div class="ui_title_wrap">
                        <h2>外部动态复制</h2>
                    </div>
                </div>
                <div class="demo_box" id="demo_3">
                    <div class="ui_form_1">
                        <ul>
                            <li class="submit">
                                <div class="detail">
                                    <a href="#" class="ui_btn_blue">复制下面框框里的</a>
                                </div>
                            </li>
                            <li class="textarea">
                                <label for="" class="label">个人</label>
                                <div class="detail">
                                    <textarea name="" id="" cols="30" rows="10" class="text text_2">大块文本域</textarea>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="ui_title demo_title">
                    <div class="ui_title_wrap">
                        <h2>事件机制</h2>
                    </div>
                </div>
                <div class="demo_box" id="demo4">
                    <div class="ui_form_1">
                        <ul>
                            <li class="submit">
                                <div class="detail">
                                    <a href="#" class="ui_btn_blue">来试试吧</a>
                                </div>
                            </li>
                            <li>
                                <label for="" class="label">事件名称:</label>
                                <div class="detail">
                                    <input type="text" class="text">
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="ui_title demo_title">
                    <div class="ui_title_wrap">
                        <h2>移除事件</h2>
                    </div>
                </div>
                <div class="demo_box" id="demo5">
                    <div class="ui_form_1">
                        <ul>
                            <li class="submit">
                                <div class="detail">
                                    <a href="#xxxx" class="ui_btn_blue">复制</a>
                                </div>
                            </li>
                            <li class="submit">
                                <div class="detail">
                                    <a href="#xxxx" class="ui_btn_blue">把复制干掉</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

 

                <div class="ui_title demo_title">
                    <div class="ui_title_wrap">
                        <h2>外部按钮设置复制内容</h2>
                    </div>
                </div>
                <div class="demo_box" id="demo6">
                    <div class="ui_form_1">
                        <ul>
                            <li class="submit">
                                <div class="detail">
                                    <a href="#xxxx" class="ui_btn_blue">复制</a>
                                </div>
                            </li>
                            <li class="submit">
                                <div class="detail">
                                    <a href="#xxxx" class="ui_btn_blue">设置内容为 谢亮+<span style="font-weight:900;color:#fff;">0</span></a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
               
               

               

            </div>
            <!-- 右侧结束 -->

        </div>
    </div>

   

<script type="text/javascript" src="http://homecp.meishichina.com/v6/js/lib/??jquery.js,jquery-easing.js,jquery-delayHover.js,jquery-tab.js,jquery-imgLoad.js,msc.js,msc-event.js,msc-ui-dialog.js,msc-goTop.js,msc-template.js,msc-user.js,ping.js,ga.js?20140401"></script>

<script type="text/javascript" src="msc-tools-copy.js"></script>
<script type="text/javascript">
    var copy = msc.tools.copy;
    var successFn = function(str){
        msc.ui.dialog.success("成功 = "+ str)
    }

    //demo1
    copy({
        id:"#demo_1 .ui_btn_blue",
        str: function(){
            return this.innerHTML;
        },
        success: successFn
    });

    //demo2
    copy({
        id:"#demo_2 .ui_btn_blue",
        str: "学习吧",
        success: successFn
    });

    //demo3
    var $demo3 = $("#demo_3");
    copy({
        id: $demo3.find("a.ui_btn_blue"),
        str: function(){
            return $demo3.find("textarea").val();
        },
        success: successFn
    });

    //demo4
    var $demo4 = $("#demo4"),
        $text4 = $demo4.find(".text");
    copy({
        id: $demo4.find("a.ui_btn_blue"),
        str: "客官, 感觉如何",
        success: successFn,
        mouseover: function(){
            $text4.val("滑入 : mouseover");
        },
        mouseout: function(){
            $text4.val("滑出 : mouseout");
        },
        mousedown: function(){
            $text4.val("按下 : mousedown");
        },
        mouseup: function(){
            $text4.val("拿开 : mouseup");
        }
    });

    //demo5
    var $btn5 = $("#demo5").find("a.ui_btn_blue");
    $btn5.eq(1).click(function(){
        if(this.innerHTML === '把复制干掉'){
            copy.remove($btn5.eq(0));
            $btn5.eq(0).addClass("ui_btn_gray");
            this.innerHTML = '再加上';
        } else {
            this.innerHTML = '把复制干掉';
            $btn5.eq(0).removeClass("ui_btn_gray");
            copy({
                id: $btn5.eq(0),
                str: "复制",
                success: successFn
            });
        }
    });
    copy({
        id: $btn5.eq(0),
        str: "复制",
        success: successFn
    });

    //demo6
    var $btn6 = $("#demo6").find("a.ui_btn_blue");
    $btn6.eq(1).click(function(){
        var hit;
        $(this).find("span").html(function(index, value){
            return hit = (value|0)+1;
        });
        copy($btn6.eq(0), '谢亮+'+ hit);
    });
    copy({
        id: $btn6.eq(0),
        str: "谢亮+0",
        success: successFn
    });
</script>
</body>
</html>
 

 

时间： 2024-04-04 17:54:03

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

android实现文本复制到剪切板功能(ClipboardManager)_Android

注意:导包的时候 API 11之前: android.text.ClipboardManagerAPI 11之后: android.content.ClipboardManager 复制代码 代码如下: /** * 实现文本复制功能 * add by wangqianzhou * @param content */  public static void copy(String content, Context context)  {  // 得到剪贴板管理器  ClipboardManager

android实现文本复制到剪切板功能(ClipboardManager)

注意:导包的时候 API 11之前: android.text.ClipboardManagerAPI 11之后: android.content.ClipboardManager 复制代码 代码如下:/** * 实现文本复制功能 * add by wangqianzhou * @param content */  public static void copy(String content, Context context)  {  // 得到剪贴板管理器  ClipboardManager

JS将制定内容复制到剪切板的方法

 这篇文章主要介绍了JS将制定内容复制到剪切板的方法,需要的朋友可以参考下  代码如下: function copyText() {    //复制内容  var txt = document.getElementById("table2").rows[1].cells[0].innerHTML;    //去除空格  txt = txt.replace(/ /," ");    //去除换行  txt = txt.replace(/<BR><BR

JQ插件zclip复制到剪切板的几个例子

复制到剪切板的功能,在我们分享网址,邀请朋友的时候会用到,而针对IE浏览器我们有很好的办法,但随着用chrome浏览器的人越来越多,我们就需要写出兼容各大浏览器的代码,现在为大家介绍一个jquery的插件zclip,专门用来处理复制功能的,用法很简单. html: <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

zeroclipboardjs 复制到剪切板的flash代码

zeroclipboard网页特效 复制到剪切板的flash代码 //这步很重要,设定flash文件引用路径. zeroclipboard.setmoviepath('http://www.111cn.net/scripts/zeroclipboard/zeroclipboard.swf'); //创建zeroclipboard对象 clip = new zeroclipboard.client(); clip.sethandcursor(true); //加载事件,在mouseo教程ver事件

JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)_jquery

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

兼容ie,ff 复制到剪切板js代码

兼容ie,ff 复制到剪切板js代码 <form name="form01"><input type="text" onmouseo教程ver="this.select();" class="iform sizeb" value="需要复制的内容!" name="contents"/> <input type="button" oncli

js复制到剪切板的实例方法

这篇文章介绍了复制到剪切板js代码,有需要的朋友可以参考需要   复制代码 代码如下: <script type="text/javascript" language="javascript"> //复制到剪切板js代码 function copyToClipBoard(s) { //alert(s); if (window.clipboardData) { window.clipboardData.setData("Text", s

js复制到剪切板的实例方法_javascript技巧

复制代码 代码如下: <script type="text/javascript" language="javascript">         //复制到剪切板js代码         function copyToClipBoard(s) {             //alert(s);             if (window.clipboardData) {                 window.clipboardData.setD