jquery实现复制功能

最新推荐文章于 2024-09-20 17:38:49 发布

ledzcl

最新推荐文章于 2024-09-20 17:38:49 发布

阅读量1.5w

点赞数

插件地址：http://download.csdn.net/download/ledzcl/10205387

js+swf实现，文件需要同时引入。 ZeroClipboard提供一个透明的flash，用于和剪切版交互，当点击页面上的“复制”按钮时，将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 需保证该flash被正确加载即可。

<!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=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
    <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/js/jquery.zclip.min.js"></script>
</head>
<body>
<input type="hidden" name="text" id="text" value="http://www.baidu.com" />
<a href="javascript:void(0)" id="dynamic">复制</a>
   <script type="text/javascript">
       $(document).ready(function(){
           $("#dynamic").zclip({
               path:'/js/ZeroClipboard.swf',
               copy:$('#text').val(),//复制的内容
               beforeCopy:function(){

               },
               afterCopy:function(){
                   alert($("#text").val());
               }
           });
           //beforeCopy afterCopy 是可选项
       });
   </script>
</body>
</html>

复制方式2

<input name="copyBtn" type="button" id="test" value="data" />

<script type="text/javascript" src="${base}/bak/js/jquery.zclip.min.js"></script>
<script type="text/javascript" src="${base}/bak/js/ZeroClipboard.js"></script>

$("input[name='copyBtn']").each(function () {
    var id = $(this).attr('id');
    var data = $(this).val();
    console.log(id);
    var clip = null;
    clip = new ZeroClipboard.Client();
    ZeroClipboard.setMoviePath('${base}/resources/module/shop/swf/ZeroClipboard.swf');  //和html不在同一目录需设置setMoviePath
    clip.setHandCursor(true);
    clip.setText(data);
    clip.addEventListener('complete', function (client, text) {
        alert("恭喜复制成功");
    });
    clip.glue(id);
});

复制方式3（推荐）：

<a class="gds-fg-blue btn" data-clipboard-text="data">复制链接</a>

/*

data-clipboard-text="data" 复制的数据

<script src="${base}/resources/common/js/clipboard.min.js"></script>

<script>
    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>