js复制兼容：ZeroClipboard复制到剪切板(支持IE、FF、Chrome)

注意：ZeroClipboard在本地测试无法直接使用，必须在服务器上测试,如http://localhost... 

准备：ZeroClipboard.swf 和 ZeroClipboard.js

小示例：单用

<!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>
</head>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<body>
<input type="submit" name="btn_copy" value="复制" id="btn_submit" />
<script type="text/javascript">
var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.setText("要复制的文本");
clip.glue("btn_submit");
</script>
</body>
</html>

下载Demo>>>>>>>>>

 通用版：

<!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>
</head>
<body>
text: <input type="text" name="text" value="copy ok!" id="text"/>
<input type="submit" name="btn_copy" value="复制" id="btn_submit"/>
<script type="text/javascript" src="ZeroClipboard.js"></script>
 
<script type="text/javascript">
copyToClipboard('text','btn_submit');
function copyToClipboard(txt,id){
var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
var text= document.getElementById(txt).value;
clip.setText(text);                    
clip.glue(id);
clip.addEventListener( "complete", function(){
    alert("复制成功！");
});
}
</script> 
</body>
</html>

 

jq：zclip复制

 

ZeroClipboard官网

更多功能>>>

posted @ 2013-09-07 16:24  tinyphp  Views(20947)  Comments(1)  Edit  收藏  举报