clipboard.js实现无flash复制内容到剪贴板

由于最近在写一个项目其中有一个功能是要实现将页面上的某一段内容复制到剪贴板上，当时想用ZeroClipboard.js+ZeroClipboard.swf的,奈何项目中有移动端部分,考虑到flash已经风采不复当年,ios已经抛弃了flash。这个方法就只好作罢.所以用clipboard.js.可以实现纯JavaScript(无
Flash)的浏览器内容复制到系统剪贴板的功能。这是在github上的一个开源项目.

如何使用clipboard.js

1.从github上下载clipboard.min.js,并在页面上引用(clipboard.min.js在github下载的dist文件夹中.)

HTML部分

2.页面上实现,主要是button中的代码 

<div class="popup_con" id="shareid" style="display: none">
<div class="popup_con_box">
<div class="popup_con_question">
<span>分享链接<a href="javascript:closeDivFun()"> <img src="<%=imageServerPath%>wap/images/user/cross.jpg" style="width: 15px;border-radius:15px;float:right" /></a></span>
<span id="copytext">http://www.krc.sidlu.com/register?id=${user.id }</span>
</div>
<div class="popup_con_btn">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#copytext">复制链接</button>
</div>
</div>
</div>

<div class="homepage_list_inner_right">
<span><a href="javascript:showDivFun()">邀请好友</a></span>
</div>

<jwr:script src="/script/wap/zip/clipboard.js" /> <!-- 引入js文件 -->

js部分 new Clipboard('.btn'); 实例化语句

<script type="text/javascript">
//弹出调用的方法
function showDivFun() {
document.getElementById('shareid').style.display = 'block';
}
//关闭事件
function closeDivFun() {
document.getElementById('shareid').style.display = 'none';
}
$(function() {
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
});
</script>

如果还有什么不懂的可以直接去github上了解,有关于clipboard.js的入门(在最下面) 点击进入