jquery 复制粘贴

最新推荐文章于 2023-08-11 18:21:40 发布

aa1049372051

最新推荐文章于 2023-08-11 18:21:40 发布

阅读量6.3k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/aa1049372051/article/details/26389847

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jquery 复制粘贴

源码包csdn下载地址:http://download.csdn.net/detail/aa1049372051/7376241

原文地址: http://www.sunzhenghua.com/jquery-zclip-zeroclipboard-copy-paste-demo

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.zclip.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
 
    $('#copy-button').zclip({
        path : 'ZeroClipboard.swf', //好像注释掉也行
        copy : $('#content').text()
    });
     
    // 当点击 Id 为 copy-button 的按钮时
    // Id 为 content 中的内容将会被复制
     
    $('#copy-dynamic').zclip({
        path : 'ZeroClipboard.swf',
        copy : function(){
                   return $('input#dynamic').val();
               }
    });
     
    // 当点击 Id 为 copy-dynamic 的按钮时
    // 在 Id 为 dynamic input 框中所输入的内容将会被复制
    
    $("#copy-callback").zclip({
        path : 'ZeroClipboard.swf',
        copy : function(){
                   return $('input#dynamic').val();
               },
        beforeCopy:function(){
            $('#callback-paragraph').css('background','yellow');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            $('#callback-paragraph').css('background','pink');
            $(this).css('color','purple');
        }
    });
    
    //文本框一开始默认的背景色为米白色
    //当复制的时候， 也就是鼠标点的时候， 背景色变为黄色
    //当复制完成后， 也就是松开鼠标的时候， 背景色变为粉色
    //当点击文字的时候， 其颜色也在变化 
});
</script>
<div id="content">http://www.sunzhenghua.com/blog</div>
<button id="copy-button">点击复制该链接</button>
 <br/>
 <br/>
<input type="text" id="dynamic" value="http://www.mostupdated.com"  style="width:200px"/><br/>
<button id="copy-dynamic">复制 input 框中的内容</button>
 <br/> <br/>
<button id="copy-callback">复制 input 框中的内容并触发事件</button>
<br/><br/>
 <textarea style="width:300px;height:100px"></textarea>
</body>
</html>