複製剪貼板功能

複製剪貼板功能

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.csdn.net/detail/athrunzero/4458460

PS:如果flash和js不在同一路徑,可使用ZeroClipboard.setMoviePath( “Flash路徑” );來設置flash路徑。

PS2:博客搬家了,以後不再 CSDN 更新了,見諒。最新博客地址:http://www.cnblogs.com/yjzhu/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章