复制到剪贴板jquery-Zclip插件使用方法

2016年1月5日 5656点热度 0人点赞 0条评论

Zclip插件下载地址：
http://www.webzsky.com/source/v/js_21.html
这个插件网上都说是兼容各浏览器，要不是我的用的时候火狐不兼容，我差点就信了
由于这个插件是通过flash实现的复制的剪切板功能，据我观察火狐不兼容，表现出来的情况是按钮上呈现黑色遮罩层，点击无效果。我的解决方案是判断火狐浏览器，然后提示浏览器不支持，请手动复制，并且js选中要复制的内容。

js部分：

<script src="statics/js/jquery.zclip.min.js"></script>

<script>

$(function(){ $("#copy_p").zclip({

path: 'statics/js/ZeroClipboard.swf',

copy: $('#para').text(),

afterCopy: function(){

$("#para").css("background-color",'#cff');

$("<span id='msg'/>").insertAfter($('#copy_p')).text('复制成功').fadeOut(2000);
}
});

//按钮绑定点击判断火狐浏览器
$(document).on("click",".zclip",function(){
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
var para = $('#para').text();
selectText();
$("#msg").remove();
$("<span id='msg'/>").insertAfter($('#copy_p')).text('浏览器不支持,请手动复制').fadeOut(3000);
}
});
//选择内容函数
function selectText() {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('para'));
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById('para'));
window.getSelection().addRange(range);
}
}
});
</script>

html部分：

<span class="con2_title">git地址：</span> <span class="con2_content"><p id="para" class="copy_p">http://www.webzsky.com</p><button id="copy_p" type="button" class="btn_default">复制</button></span>

css部分：
/*火狐下按钮异常显示，通过以下css处理*/