不用Flash实现剪贴板功能的轻量级JavaScript库

最近在项目中需要用到按钮点击以后把对应的订单信息复制到剪贴板中,方便用户操作可以将复制的信息粘贴到QQ或者微信中,从网上找到的可用的例子有只支持IE以及IE内核的浏览器的复制粘贴功能。

代码如下:

function copy_code(copyText)
{
    if (window.clipboardData)
    {
      window.clipboardData.setData("Text", copyText)
     }

}
IE浏览器是支持window.clipboardData.setData("Text", copyText);这种方式的,但是其他的浏览器是不认的,导致其他浏览器是乜有效果的。

在每一个Github仓库页面的侧边栏上都有一个小部件,用来显示repo的HTTPS克隆地址,当你点击紧挨着这个部件的按钮时,就会复制当前repo的URL到用户的剪贴板中。Github用JavaScript库ZeroClipboard来实现这一功能,问题是这个库是用一个不可见的Flash来完成剪贴操作,而Flash技术正被各大浏览器厂商冷落,所以势必要有一个新的方案。

Rocha借鉴了一些思路:通过给execCommand传递参数指令来执行相关操作;集成Selection API。通过结合这些技术,Clipboard.js为开发者提供了一个集成了实用的API的多功能轻量级JavaScript库。如果想要将按钮与库绑定,开发者需要声明触发剪贴板的元素:

var clipboard = new Clipboard('.btn');
通过选择器,或者元素ID将Clipboard对象和需要触发复制粘贴的按钮元素建立关系,从而可以把你想要复制的内容复制到剪贴板中。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 有些时候,我们希望让用户在网页上完成某个操作就能自动将指定的内容复制到用户计算机的剪贴板中。但是出于安全原因,大多...
    乖乖果效36阅读 4,845评论 0 0
  • 本章内容 理解表单 文本框验证与交互 使用其他表单控制 14.1 表单的基础知识 通过document.forms...
    闷油瓶小张阅读 2,823评论 0 0
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 4,392评论 0 1
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,834评论 0 17
  • 前一段时间正是填报高考志愿的时候,作为一个即将结束大一生活的人来说,免不了被复读的朋友问这问那,在细心解答的时候不...
    爱画爱写的鲲阅读 1,131评论 0 3