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

网上一键复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