登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

pcwanli的博客

nx

 
 
 

日志

 
 

同时支持iexplorer和firefox的javascript复制拷贝信息到剪贴板方法  

2010-12-16 10:26:31|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在WEB应用中,有时候会显示一些信息提供给客户进行拷贝,客户拷贝后就能粘贴到其他需要的位置,不需要客户手动的去选择信息然后在点复制。下面就提供一段代码可以同时支持iexplorer和firefox的javascript拷贝到剪贴板功能。
功能会用到一个flash文件。(对应的文件 clipboard.swf 可以在附件的压缩包中找到)
目前的浏览器,基本上都装了flash的插件,因此基本上不会有什么影响。
Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html><head><title>同时支持iexplore和firefox的javascript复制拷贝剪贴板方法.txt</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<script>  
//copy信息到剪贴板  
function cpIt(s){  
    if (window.clipboardData) {  
        window.clipboardData.setData("Text",s);  
    }  
    else  
    {    
        var flashcopier = 'flashcopier';  
        if(!document.getElementById(flashcopier)) {  
          var divholder = document.createElement('div');  
          divholder.id = flashcopier;  
          document.body.appendChild(divholder);  
        }  
        document.getElementById(flashcopier).innerHTML = '';  
        var divinfo = '<embed src="clipboard.swf" FlashVars="clipboard='+encodeURIComponent(s)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';  
        document.getElementById(flashcopier).innerHTML = divinfo;  
    }  
    alert("\r \n信息:"+s+"\r\n\r\n恭喜您,您需要的信息已经被成功复制到剪贴板了!\r\n\r\n贴心小提示:(1) 按 Ctrl+v 可以将上面信息粘贴到您指定的位置。\r\n\r\n                        (2) 按空格键可迅速关闭本提示框");  
}  
</script>  
</head><body>  
<input type="text" name="idCopyText" id="idCopyText" value="要拷贝的文字..."><input type="button" value="拷贝到剪贴板" onclick="cpIt(document.getElementById('idCopyText').value);">  
</body></html>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html><head><title>同时支持iexplore和firefox的javascript复制拷贝剪贴板方法.txt</title>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <script>  //copy信息到剪贴板  function cpIt(s){   if (window.clipboardData) {    window.clipboardData.setData("Text",s);   }   else   {      var flashcopier = 'flashcopier';    if(!document.getElementById(flashcopier)) {      var divholder = document.createElement('div');      divholder.id = flashcopier;      document.body.appendChild(divholder);    }    document.getElementById(flashcopier).innerHTML = '';    var divinfo = '<embed src="clipboard.swf" FlashVars="clipboard='+encodeURIComponent(s)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';    document.getElementById(flashcopier).innerHTML = divinfo;   }   alert("\r\n信息:"+s+"\r\n\r\n恭喜您,您需要的信息已经被成功复制到剪贴板了!\r\n\r\n贴心小提示:(1) 按 Ctrl+v 可以将上面信息粘贴到您指定的位置。\r\n\r\n                        (2) 按空格键可迅速关闭本提示框");  }  </script>  </head><body>  <input type="text" name="idCopyText" id="idCopyText" value="要拷贝的文字..."><input type="button" value="拷贝到剪贴板" onclick="cpIt(document.getElementById('idCopyText').value);">  </body></html>  

附件:本文中使用的测试例子压缩包 example.zip
------------------------------------------------------------
分享知识,分享快乐,希望文章能给需要的朋友带来小小的帮助。
http://stephen830.javaeye.com/blog/258020
  评论这张
 
阅读(905)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018