ZeroClipboard插件完毕多浏览器复制功效,JS达成复制内容到剪贴板功用

by admin on 2019年6月22日

前记:本来原生的JS是有提供三个函数来兑现这些效率(window.clipboardData),不过很不满,那一个函数仅仅帮助IE和FF浏览器,所以基本用途非常小。下面介绍的是四个第三方插件库(ZeroClipboard.js)。

前记:本来原生的JS是有提供七个函数来实现这些效应(window.clipboardData),然则很不满,这一个函数仅仅协理IE和FF浏览器,所以基本用途一点都不大。上边介绍的是二个第三方插件库(ZeroClipboard.js)。

一个简约例子:

ZeroClipboard插件完毕多浏览器复制功效,JS达成复制内容到剪贴板功用。不过值得注意的是法定介绍中已昭然若揭表态说这么些插件不扶助ie6,上面将提供多实例化Zero
Clipboard复制功用的完结及包容ie6的写法!

ZeroClipboard.js在Git上的地点为:https://github.com/zeroclipboard/zeroclipboard

 

<html>
 <body>
  <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
  <script src="~/Scripts/jquery-1.7.1.js"></script>
  <script src="~/Scripts/ZeroClipboard.js"></script>
 </body>
 <script>

 var client = new ZeroClipboard( $("#copy-button") );
  client.on('ready', function (event) {

      client.on('copy', function (event) {
        event.clipboardData.setData('text/plain', event.target.innerHTML);
        alert("复制成功");
      });

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

先下载ZeroClipboard
//www.jb51.net/jiaoben/24961.html

瞩目:此js库不补助同盟手提式有线电话机端(包含Android、IOS),仅帮助PC端浏览器。

ZeroClipboard.js在Git上的地方为:

2.2本子需求引用jquery,要习于旧贯把js代码写到页面底部,经测试,开掘此代码不支持IE10/11,以下提供兼容IE的function,替换js部分就可以

<style type="text/css">
 body { font-family:arial,sans-serif; font-size:9pt; }
 .copyit {text-align:center; border:1px solid #FD6001; background-color:#ED730B; margin:10px; padding:2px 5px; cursor:pointer; font-size:12px; border-radius:3px;}
 .copyit.hover { background-color:#FD6001;}.copyit.active { background-color:#d25102;}/*鼠标hover效果,实为调用setCSSEffects()方法*/
 .copy_info{width:260px;height:100px;border:1px solid #ccc;padding:5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/ZeroClipboard/ZeroClipboard.js"></script>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt">第1个被复制的内容!!!</textarea>
<b class="copyit">复制内容</b>
</div>
<br/>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt">第2个被复制的内容!!!</textarea>
<b class="copyit">复制内容</b>
</div>
<script type="text/javascript">
var clip = null;
function copyThis() {
 if($.browser.version==6.0){
  //针对ie6
  $('.copyit').bind("click",function(){
  var code=$(this).parents(".clip_container").find(".copycnt").text();
  window.clipboardData.setData("Text",code);
  alert('被复制的内容:\n'+code);
   })
   return;
 }
 ZeroClipboard.setMoviePath("http://img.jb51.net/js/scripts/clipboard.swf'");//如果ZeroClipboard.js, ZeroClipboard.swf放在同一目录下,可省略这句;
 clip = new ZeroClipboard.Client();
 $('.copyit').mouseover( function() {
  var code=$(this).parents(".clip_container").find(".copycnt").text();
  clip.setText(code);
  if (clip.div) {//已创建过包含flash的父层div,则鼠标hover时重新定位flash层的位置
   //clip.receiveEvent('mouseout', null);
   clip.reposition(this);
  }else{
  clip.glue(this)};
  //clip.receiveEvent('mouseover', null);
 } );
 clip.addEventListener( 'complete', function(client, text){
  alert("被复制内容:\n"+text);
 });
}
copyThis();
</script>
<textarea style="width:300px;height:300px;">
粘贴复制的内容到这里试试!!
</textarea>

第一步:将插件库引进到工程中。

瞩目:此js库不协理协作手机端(包含Android、IOS),仅支持PC端浏览器。

<script>
    $(function() {
      var text="取文本";
      var msg="复制成功";
      clipboard("btn_copy",text,msg);
    });

    //参数说明
    //button:按钮id
    //text:要复制的文本
    //msg:复制成功提示文本
    function clipboard(button,text,msg) {

      if (window.clipboardData) {    //for ie
        var copyBtn = document.getElementById(button);
        copyBtn.onclick = function () {
          window.clipboardData.setData('text', text);
          alert(msg);
        }
      } else {
        var client = new ZeroClipboard($("#" + button));
        client.on('ready', function (event) {

          client.on('copy', function (event) {
            event.clipboardData.setData("text/plain", text);
            alert(msg);
          });
        });

        client.on('error', function (event) {
          ZeroClipboard.destroy();
        });
      }
      return false;
    }
  </script>

地点的兑现方式,除了ie6使用window.clipboardData.setData来贯彻复制功效外,别的浏览器都用Zero
Clipboard 插件来落到实处复制功能!

把Git上的dist目录copy到本人的目录中(其实只须要ZeroClipboard.js和ZeroClipboard.swf就OK~)

 

必发88 ,最后,须要小心的是不要在当地调整,你会意识不会生效,因为Flash的安全限制

动用该插件时应注意的几点:

必发88 1

ZeroClipboard插件完毕多浏览器复制功效,JS达成复制内容到剪贴板功用。率先步:将插件库引入到工程中。

zeroclipboard源码:
zeroclipboard官网:zeroclipboard.org

1、以上 ZeroClipboard.js,
ZeroClipboard.swf须要放在同等路线下。若是不在同一路线,可利用ZeroClipboard.setMovie帕特h(
“Flash路径” );来设置ZeroClipboard.swf 地址。

本子文件引入:

把Git上的dist目录copy到温馨的目录中(其实只需求ZeroClipboard.js和ZeroClipboard.swf就OK~)

您或然感兴趣的稿子:

  • ZeroClipboard插件达成多浏览器复制作用(帮助firefox、chrome、ie6)
  • 运用ZeroClipboard消除跨浏览器复制到剪贴板的标题
  • zeroclipboard
    单个复制开关和七个复制按键的落成格局
  • zeroclipboard复制到剪切板的flash
  • js
    剪切板应用clipboardData详细剖析
  • js复制到剪切板的实例方法
  • js 剪切板的用法(clipboardData.setData)与js
    match函数介绍
  • JS将制定内容复制到剪切板示例代码
  • Js+Flash完毕访问剪切板操作
  • JavaScript使用ZeroClipboard操作剪切板

2、setCSSEffects() 方法的深入分析:
当鼠标移到开关上或点击时,由于有Flash按键的遮蔽,所以复制开关本人体的
css “:hover”, “:active” 等伪类恐怕会失灵。setCSSEffects()
方法就是缓和这几个标题。首先大家需求将伪类改成类,比如:

<script src="ZeroClipboard.js"></script>

必发88 2

复制代码 代码如下:

其次步:伊始化插件库。

 

.copyit:hover{
 border-color:#FF6633;
}
// 要求将”:hover”改成下边包车型大巴”.hover”
.copyit.hover{
 border-color:#FF6633;
}

var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
 moviePath: "ZeroClipboard.swf"
} );

剧本文件引入:

3、getHTML() 方法的剖判:倘诺您想本人实例贰个Flash ,不用Zero
Clipboard的依靠方法,那么那几个方法就足以帮上忙了。它承受三个参数,分别为Flash的幅度和可观。重返的是Flash对应的
HTML 代码。比如:
var html = clip.getHTML( 150, 20 );

第三步:上代码。

<script src="ZeroClipboard.js"></script>

你大概感兴趣的稿子:

  • 浏览器复制插件zeroclipboard使用指南
  • 利用ZeroClipboard化解跨浏览器复制到剪贴板的主题材料
  • zeroclipboard
    单个复制按键和多少个复制开关的兑现方式
  • zeroclipboard复制到剪切板的flash
  • js
    剪切板应用clipboardData详细深入分析
  • js复制到剪切板的实例方法
  • js 剪切板的用法(clipboardData.setData)与js
    match函数介绍
  • JS将制定内容复制到剪切板示例代码
  • Js+Flash达成访问剪切板操作
  • JavaScript使用ZeroClipboard操作剪切板
<!DOCTYPE html>
<html>
<head>
<title>Zero Clipboard Test</title>
<meta charset="utf-8">
</head>
<body>
<!-- 
 说明:
 1.data-clipboard-target 输入要复制的对象的ID
-->
<button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b>复制到剪贴板</b></button>
<br/>
<textarea id="fe_text" cols="50" rows="3">输入需要复制的内容</textarea>
</body>
</html>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
//初始化复制对象
var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
 moviePath: "ZeroClipboard.swf"
} );
//复制内容到剪贴板成功后的操作
clip.on( 'complete', function(client, args) {
 alert("复制成功,复制内容为:"+ args.text);
} );
</script>

 

上述示例代码注释中曾经对Zero
Clipboard的功力拓展了介绍,须要了然越来越多的效力请到

第二步:初叶化插件库。

留神:运维条件必须在服务器情状下,否则看不到效果!

var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
  moviePath: "ZeroClipboard.swf"
} );

以上正是本文的全体内容,希望本文的剧情对我们的上学恐怕干活能推动一定的增派,同期也指望多多帮忙脚本之家!

 

你恐怕感兴趣的篇章:

  • js复制内容到剪贴板代码,js复制代码的简练实例
  • JS达成复制内容到剪贴板成效包容全数浏览器(推荐)
  • 十二分主流浏览器的JS复制内容到剪贴板
  • 表单提交时自动复制内容到剪贴板的js代码
  • JavaScript复制内容到剪贴板的二种常用方法

第三步:上代码。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>Zero Clipboard Test</title>
 5 <meta charset="utf-8">
 6 </head>
 7 <body>
 8 <!-- 
 9     说明:
10     1.data-clipboard-target 输入要复制的对象的ID
11 -->
12 <button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b>复制到剪贴板</b></button>
13 <br/>
14 <textarea id="fe_text" cols="50" rows="3">输入需要复制的内容</textarea>
15 </body>
16 </html>
17 <script type="text/javascript" src="ZeroClipboard.js"></script>
18 <script type="text/javascript">
19 //初始化复制对象
20 var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
21   moviePath: "ZeroClipboard.swf"
22 } );
23 
24 //复制内容到剪贴板成功后的操作
25 clip.on( 'complete', function(client, args) {
26    alert("复制成功,复制内容为:"+ args.text);
27 } );
28 
29 </script>

如上示例代码注释中早已对Zero
Clipboard的功力拓展了介绍,必要明白越来越多的听从请到

小心:运营条件必须在服务器境遇下,不然看不到效果!

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图