在文本复制的时候,Ie和谷歌是不能同时使用 window.clipboardData,对象的,该功能IE可以使用,但是谷歌是不能使用的,所以要使用下面的插件来进行操作: ZeroClipboard.js和ZeroClipboard.swf这两个包,来进行操作。
如果这连个文件不在同一个目录下,可是在 new ZeroClipboard 对象之后调用,ZeroClipboard.setMoviePath('ZeroClipboard10.swf' );进行设置swf文件所在的目录。
案例的git地址:https://gitee.com/sgqing/google_browser_text_copy.git
<html>
<head>
<title>Zero Clipboard Test</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
var clip = null;
// 获取你要复制的内容
function $(id) {
return document.getElementById(id);
}
function init() {
//创建对象
clip = new ZeroClipboard.Client();
//是否支持复制
clip.setHandCursor(true);
// 当鼠标移到要点击的对象上面的时候,就会触发
clip.addEventListener('mouseOver', function (client) {
// // // update the text on mouse over
clip.setText($('fe_text').value);
});
// clip.setText($('fe_text').value);
// 会监听,当赋值完成之后,就会执行该方法
clip.addEventListener('complete', function (client, text) {
//debugstr("Copied text to clipboard: " + text );
alert("该地址已经复制,你可以使用Ctrl+V 粘贴。");
});
// 用于指定当前的flash运行在什么地方,一般是点击的地方
clip.glue('clip_button');
}
</script>
</head>
<!--// 一定要进行数据的初始化,要不然在使用的时候,需要点击两次才可以完成数据的赋值-->
<body onLoad="init()">
<textarea id="fe_text" cols=50 rows=5>复制内容文本1</textarea>
<span id="clip_container"><span id="clip_button"><b> 复制</b></span></span>
<br>
</body>
</html>
特别提醒,在使用的时候,首先需要对上面的方法,进行初始化,要不然需要点击两次才可以完成数据的复制,注意在复制的时候,保证glue方法,不会操作同一个对象,要不然只会操作第一次的数据