ZeroClipboard跨浏览器复制到剪切板

最新推荐文章于 2021-06-21 23:21:33 发布

iteye_19769

最新推荐文章于 2021-06-21 23:21:33 发布

阅读量116

点赞数

分类专栏： js验证文章标签： ZeroClipboard 复制粘贴

本文链接：https://blog.csdn.net/iteye_19769/article/details/82644061

版权

15 篇文章 0 订阅

订阅专栏

步骤：

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

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>

关注

专栏目录