js实现复制功能,借助zclip插件。
zclip原理
将页面的复制按钮(可以为任意一个控件)绑定zclip,会在该元素上生成一个透明的flash对象,点击该按钮实际是点击了flash对象,将页面上要复制的内容利用flash添加到剪切板中。
遇到的一个问题:本例中的复制按钮是任意移动的,但是flash元素的生成位置只和按钮绑定zclip时的位置一致。后期按钮移动,flash元素并不会跟随移动,这里没有找到好的调用接口。只能每次在移动复制按钮的时候把flash元素跟随着进行移动$("#zclip-ZeroClipboardMovie_1").css("left",$("#copy_input").offset().left);$("#zclip-ZeroClipboardMovie_1").css("top",$("#copy_input").offset().top);
。
效果
- 当鼠标位于input上面的时候,在input后面显示复制按钮。
- 整个页面只有一个复制按钮绑定了zclip。
效果图
代码
- 引入
jquery.js
和jquery.zclip.min.js
。 - 页面html:
<input type="text" id="mytext" style="display:none" value=""/>
<button id="copy_input" class="copy">复制</button>
<span id='msg' style="display:none">复制成功</span>
<input type="text" readonly='readonly' value="1" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="2" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="3" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="4" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="5" onmouseover ="showCopy(this)"/><br/>
- 复制按钮绑定zclip:
$('#copy_input').zclip({
path: 'ZeroClipboard.swf',
copy: function(){//复制内容
return $('#mytext').val();
},
afterCopy: function(){//复制成功
$("#msg").insertAfter($('#copy_input'));
$("#msg").show();
}
});
- input添加鼠标进入事件
function showCopy(obj){
$("#mytext").val($(obj).val());
$("#msg").hide();
$("#copy_input").insertAfter(obj);
$("#copy_input").show();
$("#zclip-ZeroClipboardMovie_1").css("left",$("#copy_input").offset().left);
$("#zclip-ZeroClipboardMovie_1").css("top",$("#copy_input").offset().top);
}
源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通用..</title>
<script type="text/javascript" src="js/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.zclip.min.js"></script>
</head>
<body>
<input type="text" id="mytext" style="display:none" value=""/>
<button id="copy_input" class="copy">复制</button>
<span id='msg' style="display:none">复制成功</span>
<input type="text" readonly='readonly' value="1" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="2" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="3" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="4" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="5" onmouseover ="showCopy(this)"/><br/>
<script type="text/javascript">
$(function(){
$('#copy_input').zclip({
path: 'ZeroClipboard.swf',
copy: function(){//复制内容
return $('#mytext').val();
},
afterCopy: function(){//复制成功
$("#msg").insertAfter($('#copy_input'));
$("#msg").show();
}
});
$("#copy_input").hide();
});
function showCopy(obj){
$("#mytext").val($(obj).val());
$("#msg").hide();
$("#copy_input").insertAfter(obj);
$("#copy_input").show();
$("#zclip-ZeroClipboardMovie_1").css("left",$("#copy_input").offset().left);
$("#zclip-ZeroClipboardMovie_1").css("top",$("#copy_input").offset().top);
}
</script>
</body>
</html>