[关闭]
@Belinda 2015-05-18T02:24:46.000000Z 字数 2120 阅读 1600

兼容各浏览器的点击复制文本框内容的Jquery插件

未分类


一、常规方法
  but IE only,同样的这个也是我们经常使用的。优点是体积小,仅有十来行代码,但缺点也很明显,只支持IE及以IE为内核的浏览器。
具体使用及代码可见D
注:该脚本对非IE内核的浏览器无效。想要兼容全浏览器,可以采用插件+FLASH控件的办法,具体可点击 兼容各浏览器的点击复制文本框内容的Jquery插件
使用方法如下:
引入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);
}

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

注:因为采用FLASH控件的文件实现兼容,所以本页面中请在服务器上浏览才能获得看到效果。
优点:兼容各浏览器
缺点:插件有10K大小,还需要引入一个Jqueyr的库。
如果不需要全浏览器的兼容,可以使用 常规复制文本框内容的脚本
引入Jquery后再引入插件ZeroClipboard,同时下载 FLASH控件 和JS文件放同一目录 ,在页面中添加执行的脚本。完整代码如下:

(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' ); });
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注