复制剪贴板功能
html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>ZeroClipboard（复制功能）</title>
</head>
<body>
<label for="cardid">卡号：</label>
<input type="text" name="cardid" id="cardid" value="123456789" readonly="readonly" />
<button id="copycardid">点击复制卡号</button>
</body>
</html>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>js代码如下：
function init() {
var clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.setText($('#cardid').val());
clip.addEventListener( "mouseUp", function(client) {
alert("复制成功！");
});
clip.glue("copycardid");
}
$(function(){
init();
});实现原理：
利用透明的flash覆盖在复制按钮上，点击flash，将复制内容传入到flash中，再通过flash把传入的内容写到剪贴板上。
使用方法：
需要把flash和js放到同一路径下，然后引用js即可。
具体参数说明：
var clip = new ZeroClipboard.Client(); // 新建一个对象
clip.setHandCursor( true ); //设置鼠标手型
clip.setText($('#cardid').val()); // 设置要复制的文本
clip.glue("copycardid"); //复制按钮的ID
实例下载地址：
URL：http://download.youkuaiyun.com/detail/athrunzero/4458460
PS：如果flash和js不在同一路径，可使用ZeroClipboard.setMoviePath( “Flash路径” );来设置flash路径。
PS2：博客搬家了，以后不再 优快云 更新了，见谅。最新博客地址：http://www.cnblogs.com/yjzhu/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
