网页怎么实现文本框内容复制到剪贴板
2011-01-15 16:12
309 查看
前段时间,老板要求做一个网页实现文本框内容复制到剪贴板的功能,我找了些实现这个功能的技术资料,都只支持IE和Firefo(火狐),这是因为flash 10更新后,网页文本框内容复制到剪贴板兼容所有浏览器的代码一时间在网络中消失,大多都只支持兼容IE和火狐,谷歌Chrome,苹果Safari等正规浏览器几乎都不支持,可以说是没办法支持了,原来用flash传值复制到系统剪贴板的代码因为flash 10的更新,变的毫无用处,在网络上找也根本都不到相关代码,难到说网页就没有办法实现这个文本框内容复制到剪贴板的功能的兼容所有浏览器的代码了吗?答案当然是否的。要实现网页文本框内容复制到剪贴板功能代码兼容所有浏览器,我们就必须要明白为什么flash
10更新后原来的代码不能用的原因,那样就知道了网页怎么实现文本框内容复制到剪贴板,兼容IE、火狐Firefox、谷歌Chrome、苹果Safari所有浏览器。
那么为什么Flash 10更新后,原来使用flash实现网页文本框复制到剪贴板兼容所有浏览器的代码为什么不能用了呢?难道说flash 10更新后,flash就不再支持内容复制到剪贴板了吗?不是的,笔者在网上找了些资料后,发现原来falsh 10更新后要实现内容复制到剪贴板必须要在flash上有一个点击事件,才会触发复制,不能像以前那个只是调用一个参数了。既然知道了事情做起来就简单了,理论就是在点击的那个按钮上面浮动一个透明的flash,点鼠标点击的时候其实就是点击那个透明的flasn。然后把内容复制到剪贴板。
既然理论以经出来了,那么就可以照着做了,因为自己写这个代码有点花时间,我就网上找了一下,找到了一个叫zeroclipboard的组件,它的原理就是网页实现文本框内容复制到剪贴板,我下载后打开看研究了一下,总算弄明白了,下面就是相关代码:
<html>
<head>
<title>Zero Clipboard Test</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
var clip = null;
var clip2=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.addEventListener('complete', function (client, text) {
//debugstr("Copied text to clipboard: " + text );
alert("文本以经复制,你要以使用Ctrl+V 粘贴。");//复制后的事件
});
clip.glue( 'd_clip_button', 'd_clip_container' );//加载事件,
}
</script>
</head>
<body onLoad="init()">
<textarea id="fe_text" cols=50 rows=5 onChange="clip.setText(this.value)">复制内容文本1</textarea>
<div id="d_clip_container" style="position:relative">
<div id="d_clip_button" style="width:200px;"><b>复制内容1</b></div>
</div><br>
<br>
</body>
</html>
使用代码时要注意,必须要把代码放在测试目录,也就是不能以文件的形式访问的,要以http的形式,意思就是要用IP或是域名访问,就如http://www.cnwebskill.com这样,不能以file://这个样子,flash会出错的,没权限。
eroClipboard.js文件里moviePath属性是falsh的地址,就是目录下的那个ZeroClipboard.swf存放的地址位置。
ZeroClipboard这个类库其实还是不错的,具体的例子文件,我以经打包,大家可以点击“网页怎么实现文本框内容复制到剪贴板,兼容IE、火狐Firefox、谷歌Chrome、苹果Safari所有浏览器”下载,当然你们也可以在百度或谷歌中输入相关关键字搜索这个类库和相关例子。
10更新后原来的代码不能用的原因,那样就知道了网页怎么实现文本框内容复制到剪贴板,兼容IE、火狐Firefox、谷歌Chrome、苹果Safari所有浏览器。
那么为什么Flash 10更新后,原来使用flash实现网页文本框复制到剪贴板兼容所有浏览器的代码为什么不能用了呢?难道说flash 10更新后,flash就不再支持内容复制到剪贴板了吗?不是的,笔者在网上找了些资料后,发现原来falsh 10更新后要实现内容复制到剪贴板必须要在flash上有一个点击事件,才会触发复制,不能像以前那个只是调用一个参数了。既然知道了事情做起来就简单了,理论就是在点击的那个按钮上面浮动一个透明的flash,点鼠标点击的时候其实就是点击那个透明的flasn。然后把内容复制到剪贴板。
既然理论以经出来了,那么就可以照着做了,因为自己写这个代码有点花时间,我就网上找了一下,找到了一个叫zeroclipboard的组件,它的原理就是网页实现文本框内容复制到剪贴板,我下载后打开看研究了一下,总算弄明白了,下面就是相关代码:
<html>
<head>
<title>Zero Clipboard Test</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
var clip = null;
var clip2=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.addEventListener('complete', function (client, text) {
//debugstr("Copied text to clipboard: " + text );
alert("文本以经复制,你要以使用Ctrl+V 粘贴。");//复制后的事件
});
clip.glue( 'd_clip_button', 'd_clip_container' );//加载事件,
}
</script>
</head>
<body onLoad="init()">
<textarea id="fe_text" cols=50 rows=5 onChange="clip.setText(this.value)">复制内容文本1</textarea>
<div id="d_clip_container" style="position:relative">
<div id="d_clip_button" style="width:200px;"><b>复制内容1</b></div>
</div><br>
<br>
</body>
</html>
使用代码时要注意,必须要把代码放在测试目录,也就是不能以文件的形式访问的,要以http的形式,意思就是要用IP或是域名访问,就如http://www.cnwebskill.com这样,不能以file://这个样子,flash会出错的,没权限。
eroClipboard.js文件里moviePath属性是falsh的地址,就是目录下的那个ZeroClipboard.swf存放的地址位置。
ZeroClipboard这个类库其实还是不错的,具体的例子文件,我以经打包,大家可以点击“网页怎么实现文本框内容复制到剪贴板,兼容IE、火狐Firefox、谷歌Chrome、苹果Safari所有浏览器”下载,当然你们也可以在百度或谷歌中输入相关关键字搜索这个类库和相关例子。
相关文章推荐
- 让网页复制剪贴板中的内容到文本框(http://hi.baidu.com/tracyjay/blog/item/de2490295285ff26d52af1ac.html)
- jQuery简单实现点击文本框复制内容到剪贴板上的方法
- 使用clipboard.js实现页面内容复制到剪贴板
- ZeroclipboardJS+flash实现将内容复制到剪贴板实例
- 怎么设置网页内容不能被复制?怎么解决?
- JQuery zClip插件实现复制页面内容到剪贴板
- JavaScript代码轻松实现网页内容禁止复制(代码简单)
- 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》
- JavaScript之Clipboard.js实现复制内容到剪贴板
- JavaScript代码轻松实现网页内容禁止复制(代码简单)
- 网页实现复制到剪贴板js
- js 复制文本框内容到剪贴板
- 点击复制按钮复制指定文本内容,实现网页中的复制功能
- 前端H5怎么简单的实现复制text内容的操作
- Clipboard.js : 移动端浏览器实现网页内容复制
- clipboard.js实现内容复制到剪贴板
- JS实现点击按钮,复制文本框中的的内容
- JS实现文本框内容全复制
- JS实现复制网页内容自动加入版权内容代码和原文链接
- 复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)