`

ZeroClipboard跨浏览器复制到剪切板

阅读更多

步骤:

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!}}" );

});

具体使用:

<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>

 

分享到:
评论

相关推荐

    跨浏览器复制到剪切板

    总结来说,实现“跨浏览器复制到剪切板”的功能,开发者可以借助ZeroClipboard库结合JavaScript和jQuery,通过Flash技术绕过浏览器的安全限制。然而,随着Flash的逐渐淘汰,开发者也需要关注新的技术,如Web API中的...

    CSDN剪切板,跨浏览器复制

    标题中的"CSDN剪切板"是一个专门设计用于实现跨浏览器复制功能的工具,它旨在解决在不同浏览器间实现文本复制兼容性的问题。这个工具特别强调支持Internet Explorer(IE)、Chrome和Mozilla Firefox,这些都是市场上...

    ZeroClipboard.js 复制到剪切板(保准好用)

    在浏览器环境中,由于安全限制,JavaScript通常无法直接访问操作系统级别的剪切板,而ZeroClipboard.js巧妙地利用了Flash插件来解决这个问题,实现了跨浏览器的剪切板复制功能。这个库在用户交互时特别有用,比如...

    ZeroClipboard(jquery)实现跨浏览器兼容的“复制到剪切板”功能

    Zero Clipboard一个比较成熟的跨浏览器兼容的“复制到剪切板”功能库,需要放在项目里使用

    js实现ZeroClipboard组件复制内容到剪切板

    ZeroClipboard是一个JavaScript库,它通过模拟Flash对象来实现跨浏览器的剪切板复制功能,尤其对老版本的IE(如IE7/8/9)具有良好的兼容性。 ZeroClipboard的工作原理是利用Flash的`clipboardData`接口,这个接口...

    Jquery-复制到剪切板ZeroClipboard【亲测可用】

    首先,ZeroClipboard是一个开源的JavaScript库,它允许用户模拟浏览器的右键点击复制功能,将指定的文本复制到剪切板。这个库依赖于Adobe Flash,因为JavaScript本身无法直接操作系统的剪切板,而Flash插件则有这个...

    ZeroClipboard JS 复制剪切板

    ZeroClipboard是一款JavaScript库,它允许用户通过点击网页上的按钮或元素来复制文本到系统的剪贴板,从而提供了无浏览器限制的复制功能。这个库的工作原理是利用了Flash技术,因为JavaScript在浏览器的安全策略下...

    跨浏览器复制文本(clipboard和ZeroClipboard使用说明以及js文件)

    `ZeroClipboard`和`clipboard`分别代表了不同时期的跨浏览器复制文本的解决方案。对于新项目,推荐使用`clipboard`,因为它更轻量、更现代且不依赖Flash。但对于需要支持旧版浏览器的项目,`ZeroClipboard`仍是一个...

    zeroclipboard实现复到剪切板源代码

    - 使用zeroclipboard时,确保尊重用户的隐私,不要在未经用户许可的情况下复制数据到剪贴板。 - 注意Flash的安全性更新,及时升级库以防止潜在的安全风险。 8. **实际应用**: - zeroclipboard常用于数据分享、...

    ZeroClipboard 元素内容复制-兼容各浏览器

    这个库尤其有用,因为它能跨浏览器工作,确保无论用户使用的是Chrome、Firefox、Safari还是其他浏览器,都能享受到一致的复制体验。在网页开发中,有时候我们需要为用户提供方便快捷地复制特定文本或数据的功能,而...

    简单实现兼容各大浏览器的js复制内容到剪切板

    alert("文章纯文本内容已经复制到剪切板!"); }); }); ``` 在上述代码中,我们创建了一个具有ID为`id_div`的`div`元素,用于存放要复制的文本内容。然后,我们创建了一个`a`标签作为复制按钮,其ID为`copy_text...

    支持IE,firefox,Chrome复制到剪贴板的JS+FLASH插件ZeroClipboard下载

    ZeroClipboard是一款广泛使用的JavaScript库,它通过Flash技术实现了在不同浏览器上复制文本到剪贴板的功能。这个库尤其重要,因为它解决了在JavaScript中直接操作剪贴板的限制,尤其是在早期的浏览器版本中,由于...

    ZeroClipboard库提供了一个简单的方法来将文本复制到剪贴板

    这个库利用了Adobe Flash电影的技术,尽管现在Flash已经逐渐被淘汰,但在ZeroClipboard出现的时代,Flash是跨浏览器、跨平台地访问系统剪贴板的常见方式。 在JavaScript开发中,直接操作剪贴板的功能受到了浏览器...

    ZeroClipboard demo 网页复制功能

    **ZeroClipboard** 是一个流行的JavaScript库,主要用于在网页上实现跨浏览器的复制功能。这个库巧妙地利用了浏览器的安全限制,让网页应用可以模拟系统剪贴板的操作,从而让用户能够轻松地复制文本到剪贴板。它通过...

    jquery复制到剪切板插件zclip

    这个插件依赖于`ZeroClipboard`库,该库利用了Flash技术来实现跨浏览器的剪贴板交互。在介绍`jQuery zclip`之前,我们先了解一下`ZeroClipboard`。 `ZeroClipboard`是一个JavaScript库,通过模拟一个看不见的Flash...

    php下利用ZeroClipboard制作剪切板的多按钮复制功能

    在不借助浏览器自带的`copy()` API的情况下,我们可以利用JavaScript库ZeroClipboard来模拟剪切板操作。ZeroClipboard是一款优秀的开源工具,它允许用户通过点击网页上的按钮将指定文本复制到系统剪贴板,而无需实际...

    复制内容到剪切板 zclip使用

    标题 "复制内容到剪切板 zclip使用" 涉及的是一个JavaScript库,叫做ZeroClipboard,它允许用户实现浏览器中的“复制到剪贴板”功能。这个库通常与jQuery一起使用,因为提供的示例中包含了`jquery-1.7.2.min.js`,这...

    实现复制到粘贴板

    标题“实现复制到粘贴板”涉及到的是...总的来说,“实现复制到粘贴板”的技术涉及到了浏览器的API限制、跨浏览器兼容性以及第三方库的使用。对于开发者来说,理解这些概念和技术有助于在项目中提供更友好的用户体验。

    zeroclipboard复制到剪切板的flash

    zeroclipboard是一款JavaScript库,它允许网页应用利用Flash技术实现跨浏览器的文本复制到剪贴板的功能。在Web开发中,由于浏览器的安全限制,JavaScript通常无法直接操作剪贴板,而zeroclipboard通过使用Flash作为...

Global site tag (gtag.js) - Google Analytics