JS 单击复制，复制后变为已复制

浏览数：38 / 时间：2015年06月09日

这段代码是在新浪网站上找到的。先放出CSS代码：

.focus a.arrow,.card_con4 li i,.cm1_menu_wrap a.cm1_menu_box,.cm1_img span,.cm1_item1 a{ background: url(http://www.sinaimg.cn/gm/xsk/gaiban/card_sprite.png) no-repeat;}

.cm1_item_wrap{ padding-top: 9px; margin-top: 20px; position: relative;zoom:1;}
.cm1_item_wrap .toparrow{ width: 0; height: 0; border-color: #fff #fff #f0f0f0; border-style: solid; border-width: 0 9px 9px; position: absolute; top: 0px; overflow: hidden;}
.tarrl1{ left:65px;}
.tarrl2{ left:193px;}
.cm1_item_wrap .cm1_item{ width: 545px; padding: 18px 25px; background-color: #f0f0f0; color: #666; position: relative;}
.cm1_item .copy_wrap{ margin-bottom: 10px;}
.cm1_item .copy_box{ width: 310px; height: 30px; line-height: 30px; border: 1px solid #e3e3e3; background-color: #fff; padding-left: 10px; overflow: hidden; float: left;}
.cm1_item p.cm1_p{ margin-bottom: 18px;}
.cm1_item p.cm1_p1{ width: 370px; line-height: 32px; padding: 24px 0 24px 140px; }
.cm1_item img.sorry{ position: absolute; left: 78px; top: 27px;}
.cm1_item .copy_box input{ width: 240px; height: 30px; line-height: 30px; border: none; background: none; margin-left: 22px; vertical-align: middle;}
.cm1_item input.copy_btn{ float: left; width: 87px; height: 32px; border: 1px solid #e3e3e3; margin-left: 10px; text-align: center; line-height: 30px; cursor: pointer;vertical-align: middle;}
.cm1_item input.copy_btn1{ background-color: #fff;}
.cm1_item input.copy_btn2{ background-color: #474747; color: #fff;}
.cm1_item_wx{ width: 100px; position: absolute; right: 25px; top: 20px;}
.cm1_item_wx p{ padding: 5px; line-height: 24px;}

然后放出html代码：

<div class="cm1_item">
                            <p class="cm1_p">恭喜您获得礼包，<span class="red">1小时</span>后将进入淘号库,请尽快激活</p>
                            <div class="copy_wrap clear" id="kahao">
                                <div class="copy_box">
                                    卡号：
                                    <input type="text" name="" value="" readonly/>
                                </div>
                                <input type="button" name="" value="复制" class="copy_btn copy_btn1" onmousemove="copythis(‘kahao123‘,$(‘#kahao .copy_box input‘).val())" id="kahao123" />
                                <!-- 复制完成后切换为 已复制 -->
                                <input type="button" name="" value="已复制" class="copy_btn copy_btn2" style="display:none;" />
                            </div>
                            <div class="copy_wrap clear" id="kami" style="display:none">
                                <div class="copy_box">
                                    密码：
                                    <input type="text" name="" value="" readonly/>
                                </div>
                                <input type="button" name="" value="复制" class="copy_btn copy_btn1" onmousemove="copythis(‘kami123‘,$(‘#kami  .copy_box input‘).val())" id="kami123" />
                                <!-- 复制完成后切换为 已复制 -->
                                <input type="button" name="" value="已复制" class="copy_btn copy_btn2" style="display:none;" />
                            </div>

                        </div>

最后是我们的JS代码：

        function copythis(id,val){
            ZeroClipboard.setMoviePath("http://ka.sina.com.cn/ka/js/ZeroClipboard10.swf");
            var clip = new ZeroClipboard.Client();     
            clip.setHandCursor(true);         
            clip.setText(val);  
            clip.glue(id);
            //这个是复制成功后的提示  
            clip.addEventListener( "complete", function(){  
                alert(‘复制成功！‘); 
                $(‘#‘ + id).hide().next(‘.copy_btn2‘).show();
                clip.hide();
            }); 
        }