您的位置:首页 > 其它

兼容各种浏览器的一键复制--ZeroClipboard

2015-05-06 12:04 190 查看
网上一键复JS会有浏览器不兼容的问题。这里介绍的是一个js加flash的插件来处理的。网上也有有各种介绍,但感觉不完全。也不算原创吧,只是自己记录一下。以便自己以后使用。
我们直接看代码吧。
引入js文件
<script src="jquery-1.7.2.min.js"></script>
<script src="ZeroClipboard.min.js"></script>
body里面的内容
<div class="libao_code">
<input name="" type="text" class="txt" value="" id="cardno"/>
<button id="d_clip_button" class="copy_btn" title="复制礼包码" data-clipboard-target="cardno" data-clipboard-text="Default clipboard text from attribute"><b>点击复制</b>
</button>
</div>
<script type="text/javascript">
$(function() {
//这里的ID是复制按钮的id
var clip = new ZeroClipboard($("#d_clip_button"), {        		moviePath: "ZeroClipboard.swf"
});
clip.on('noFlash', function(client) {
$(".demo-area").hide();
debugstr("浏览器没有FLASH插件.");
});
clip.on('wrongFlash', function(client, args) {
$(".demo-area").hide();
debugstr("Flash 10.0.0+ is required but you are running Flash " + args.flashVersion.replace(/,/g, "."));
});
clip.on('complete', function(client, args) {
alert("复制成功,您的礼包是: " + args.text);
});
function debugstr(text) {
//这里的ID是输入框的ID
$("#cardno").append($("<p>").text(text));
}
});
</script>
</body>
注意在复制按钮里有一个自定义属性
data-clipboard-target="cardno"
这里也是填写要复制的目标ID,这里是输入框的ID

附件:http://down.51cto.com/data/2365652
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息