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

最新推荐文章于 2017-10-27 17:12:43 发布

ccecwg

最新推荐文章于 2017-10-27 17:12:43 发布

阅读量871

点赞数

分类专栏： js

js 专栏收录该内容

76 篇文章 0 订阅

订阅专栏

注意：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>