最近在项目中需要用到按钮点击以后把对应的订单信息复制到剪贴板中,方便用户操作可以将复制的信息粘贴到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对象和需要触发复制粘贴的按钮元素建立关系,从而可以把你想要复制的内容复制到剪贴板中。