ZeroClipboard复制内容到剪贴板的使用

最新推荐文章于 2020-12-01 03:51:50 发布

不充电就面壁

最新推荐文章于 2020-12-01 03:51:50 发布

阅读量1.9k

点赞数

分类专栏： JS、JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/leeyefang/article/details/24390965

版权

JS、JQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、第一步，引用 ZeroClipboard.js 文件：

注意：同时，还需要引用jquery的js文件。

2、再设置 ZeroClipboard.swf 文件的路径：

ZeroClipboard.setMoviePath("ZeroClipboard.swf");

注意： ZeroClipboard.js, ZeroClipboard.swf 两个文件的路径都需要替换为你项目中对应文件的路径。

3、代码如下：

var clip = null;
ZeroClipboard.setMoviePath("../../_js/ZeroClipboard.swf");
$().ready(function() {
     init("www.baidu.com", "da_clip_button");
 });
function init(text1, glue) {
     clip = new ZeroClipboard.Client();  // 新建一个对象 
     clip.setHandCursor(true); // 设置鼠标为手型 
     clip.addEventListener('load', function(client) {
     });
     clip.addEventListener('mouseOver', function(client, text) {
          client.setText(text1); // 设置要复制的文本。 
     });
    clip.addEventListener('complete', function(client) {
        alert("复制到剪贴板成功");
    });
    clip.glue(glue);
 }

HTML代码如下：

<body>
        <div style="margin: 30px 10px 10px 10px; text-align: center" width="100%" cellspacing="0" border="0" cellpadding="2">
            <input id="viewUrl" type="text" disabled="true" style="width: 450px" readonly="true" value="www.baidu.com" />
            <br />
            <button id="da_clip_button" style="margin-top: 10px;" title="复制内容到剪切板">复制内容</button>
        </div>
</body>

注意：其他更加详细的函数使用，可以参考如下网站

http://www.jb51.net/article/22403.htm