夏日博客

A-A+

一键复制文本框内容实现代码

2016年10月14日 前端设计 评论 1 条 阅读 7 views 次

我们介绍两利用一键复制文本框内容实现代码，包括有简单的只能使用在ie内核中，还有一种复杂的就是使用了插件,优点是体积小，仅有十来行代码，但缺点也很明显，只支持IE及以IE为内核的浏览器,插件+FLASH控件的方法–ZeroClipboard.

对于使用非IE内核的用户来说，当然不死心，希望能找到一个全面兼容的方式，在一个网站一扒，就把这个插件ZeroClipboard给扒下来了，该插件能支持所有的浏览器，但是缺点也明显，首先要基于Jquery库，插件的个头也有10K，当然压缩后可以小一些，另外有一个FLASH控件，有可能在没装FLASH播放器的机器上控件不可用。

引入Jquery后，执行如下函数代码：

  1. $(function(){  
  2.   $("#d_clip_button").click(function(){  
  3.     var Url=$("#yao_txt").text();  
  4.     copyToClipboard(Url);  
  5.  });  
  6. });  

其中copyToClipboard的函数如下：

  1. function copyToClipboard(maintext){  
  2.   if (window.clipboardData){  
  3.     window.clipboardData.setData("Text", maintext);  
  4.     }else if (window.netscape){  
  5.       try{  
  6.         netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
  7.     }catch(e){  
  8.         alert("该浏览器不支持一键复制！n请手工复制文本框链接地址～");  
  9.     }  
  10.   
  11.     var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);  
  12.     if (!clip) return;  
  13.     var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);  
  14.     if (!trans) return;  
  15.     trans.addDataFlavor('text/unicode');  
  16.     var str = new Object();  
  17.     var len = new Object();  
  18.     var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);  
  19.     var copytext=maintext;  
  20.     str.data=copytext;  
  21.     trans.setTransferData("text/unicode",str,copytext.length*2);  
  22.     var clipid=Components.interfaces.nsIClipboard;  
  23.     if (!clip) return false;  
  24.     clip.setData(trans,null,clipid.kGlobalClipboard);  
  25.   }//xiariboke.net  
  26.   alert("以下内容已经复制到剪贴板nn" + maintext);  
  27. }  

兼容各浏览器的点击复制文本框内容的Jquery插件,注：因为采用FLASH控件的文件实现兼容，所以本页面中请在服务器上浏览才能获得看到效果。

优点：兼容各浏览器

缺点:插件有10K大小，还需要引入一个Jqueyr的库

引入Jquery后再引入插件ZeroClipboard，同时下载 FLASH控件 和JS文件放同一目录 ，在页面中添加执行的脚本。完整代码如下：

  1. <script type="text/javascript" src="ZeroClipboard.js"></script>  
  2. <script type="text/javascript">  
  3. $(function(){  
  4.   var clip = new ZeroClipboard.Client();  
  5.   clip.setHandCursor( true );  
  6.   clip.setCSSEffects( true );  
  7.   clip.addEventListener( 'mouseDown', function(client){  
  8.     clip.setText( $('#yao_txt').val() );  
  9.   });  
  10.   clip.addEventListener( 'complete', function(){alert('复制成功');});  
  11.   clip.glue( 'd_clip_button' );  
  12. });  
  13. </script>  
标签：

1 条留言  访客：1 条  博主：0 条

  1. 小萝博客 2016年10月15日 上午 10:42  -199楼  回复

    这个好像用处不大

给我留言