欢迎来到[自学php网] ①群 287460651

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 我们介绍两利用一键复制文本框内容实现代码,包括有简单的只能使用在ie内核中,还有一种复杂的就是使用了插件...

优点是体积小,仅有十来行代码,但缺点也很明显,只支持IE及以IE为内核的浏览器,插件+FLASH控件的方法–ZeroClipboard

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

引入Jquery后,执行如下函数代码:

 代码如下 复制代码
$(function(){
  $("#d_clip_button").click(function(){
    var Url=$("#yao_txt").text();
    copyToClipboard(Url);
 });
});

其中copyToClipboard的函数如下:

 代码如下 复制代码

function copyToClipboard(maintext){
  if (window.clipboardData){
    window.clipboardData.setData("Text", maintext);
    }else if (window.netscape){
      try{
        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    }catch(e){
        alert("该浏览器不支持一键复制!n请手工复制文本框链接地址~");
    }

    var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
    if (!clip) return;
    var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
    if (!trans) return;
    trans.addDataFlavor('text/unicode');
    var str = new Object();
    var len = new Object();
    var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
    var copytext=maintext;
    str.data=copytext;
    trans.setTransferData("text/unicode",str,copytext.length*2);
    var clipid=Components.interfaces.nsIClipboard;
    if (!clip) return false;
    clip.setData(trans,null,clipid.kGlobalClipboard);
  }
  alert("以下内容已经复制到剪贴板nn" + maintext);
}

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

优点:兼容各浏览器
缺点:插件有10K大小,还需要引入一个Jqueyr的库


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

 代码如下 复制代码

<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
$(function(){
  var clip = new ZeroClipboard.Client();
  clip.setHandCursor( true );
  clip.setCSSEffects( true );
  clip.addEventListener( 'mouseDown', function(client){
    clip.setText( $('#yao_txt').val() );
  });
  clip.addEventListener( 'complete', function(){alert('复制成功');});
  clip.glue( 'd_clip_button' );
});
</script>

最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com