崔文远 Troy Cui 老崔先生的上海生活、技术博客

使用Zero Clipboard实现JS网页代码复制到剪贴板功能,所有浏览器全兼容

前几天,好友让我帮忙增加一个复制二维码链接的功能,虽然说这个功能在很多网站都能看到,但是你会经常看到“此功能不支持该浏览器,请手工复制文本框中内容”,这是因为大都用“window.clipboardData”来实现,但这个函数只有IE和Firefox火狐浏览器支持。

很爽快的答应了朋友,网上也搜索了一大堆,大都同样的思路,个别针对浏览器增加几个判断,但都不能兼容所有浏览器。最终从WordPress顺藤摸瓜,找到了jQuery ZeroClipboard(简称jquery-zclip),顺而找到了无需依赖jQuery的ZeroClipboard。顺利解决了问题。

相关代码

<script type="text/javascript" charset="utf-8" src="/templates/yishi/js/ZeroClipboard.min.js"></script>
<script type="text/javascript">
var client = new ZeroClipboard( document.getElementById("d_clip_button") );
client.on( "ready", function( readyEvent ) {
  // alert( "ZeroClipboard SWF is ready!" );
  client.on( "aftercopy", function( event ) {
    // `this` === `client`
    // `event.target` === the element that was clicked
//隐藏
    //event.target.style.display = "none";
    //alert("Copied text to clipboard: " + event.data["text/plain"] );
        alert('复制成功!');
   //console.log('复制成功!');
  } );
} );
</script>

插件相关信息

jQuery Zero官网:已不能访问,请访问Github

jQuery Zero Clipboard Github地址:https://github.com/patricklodder/jquery-zclip

Zero Clipboard的官方地址:http://zeroclipboard.org

Zero Clipboard Github地址:https://github.com/zeroclipboard/ZeroClipboard


Tags:

发布: cuiwenyuan 分类: Web技术 评论: 0 浏览: 28
留言列表
发表留言
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。