页面复制插件ZeroClipboard.js

最新推荐文章于 2017-12-16 13:53:10 发布

weixin_30278311

最新推荐文章于 2017-12-16 13:53:10 发布

阅读量183

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/days-/p/5564640.html

本文介绍如何使用 ZeroClipboard 实现网页上的复制功能。包括引入 JS 文件、配置 SWF 路径、创建客户端及使用 copy 功能等步骤，并提供了一个完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用：

1、引入js文件，记得先引入jquery

<script type="text/javascript" src="ZeroClipboard.js"></script>

2、然后配置swf文件的路径

ZeroClipboard.config( { swfPath: "http://YOURSERVER/path/ZeroClipboard.swf" } );  【切记一定要用这个】

3、创建客户端

var client = new ZeroClipboard($(".copy-button"));

4、使用copy功能

client.on( "copy", function (event) {
  var clipboard = event.clipboardData;
  clipboard.setData( "text/plain", "Copy me!" );
  alert('copy over!);
  // clipboard.setData( "text/html", "<b>Copy me!</b>" );
  // clipboard.setData( "application/rtf", "{\\rtf1\\ansi\n{\\b Copy me!}}" );
});

简单使用ok！

下面附上一个完整的例子：

<html>
  <head>
    <style type="text/css">
      .clip_button {
        text-align: center;
        border: 1px solid black;
        background-color: #ccc;
        margin: 10px;
        padding: 10px;
      }
      .clip_button.zeroclipboard-is-hover { background-color: #eee; }
      .clip_button.zeroclipboard-is-active { background-color: #aaa; }
    </style>
  </head>
  <body>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="ZeroClipboard.js"></script>

    <div class="clip_button">Copy To Clipboard</div>
    <div class="clip_button">Copy This Too!</div>

    <script type="text/javascript">
      var client = new ZeroClipboard( $('.clip_button') );

      client.on( 'ready', function(event) {
        // console.log( 'movie is loaded' );

        client.on( 'copy', function(event) {
          event.clipboardData.setData('text/plain', event.target.innerHTML);
        } );

        client.on( 'aftercopy', function(event) {
          console.log('Copied text to clipboard: ' + event.data['text/plain']);
        } );
      } );

      client.on( 'error', function(event) {
        // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
        ZeroClipboard.destroy();
      } );
    </script>
  </body></html>

但是遇到问题，就是需要点击两次才能复制。。

然后使用 http://www.w3dev.cn/download/20130409/jquery.zclip.js.aspx

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