壹次网首页 | 工具源码首页 | 技术文章首页 | 文章分类 | | |

文章搜索: 分类 关键字
您的位置:首页网络编程JavaScript → 单击按钮将内容复制到剪贴板
单击按钮将内容复制到剪贴板
添加日期:2008-8-21 19:46:45     [ ]

我们通常会通过单击按钮的操作,将定义好的内容直接复制到剪贴板

对于用户来说点了按钮直接【Ctrl】+【V】就可以了。

其实该功能的核心原理就是用到了window子对象clipboardData的一个方法:setData()

其语法是:clipboardData.setData(sDataFormat, sData)

参数sDataFormat表示要复制的内容的格式;参数sData则要复制的内容。
返回值:复制成功返回true;失败返回false。

比如:
clipboardData.setData("text",www.cnbruce.com)

<a href="#" onclick=javascript:clipboardData.setData("text","www.cnbruce.com")>
单击当前链接文本表示复制了内容到本地剪贴板,只需在【Ctrl】+【V】就能显示出定义的内容
</a>


以上是定义了固定的值复制到本地剪贴板,可用在诸如“将本页转阅给朋友”类似的功能需求中,以达到快捷转达网址或信息的目的。

此外,我们还会遇到这样的一些情况:当我们在某网站复制了一段内容之后,在粘贴下来时,发现不自觉的多了一行信息,该信息即是由内容复制到剪贴板同时增加的一行信息。

也就是说我们写入到剪贴板中的值除了拷贝的选择内容外,还有自己定义的值,那么如何获得“拷贝的选择内容”,这就需要使用到 document.selection.createRange() 方法,其中该方法配合 execCommand,在 HTML 编辑器中很有用,比如:文字加粗、斜体、复制、粘贴、创建超链接等。

<textarea cols=40 rows=10>
www.cnbruce.com 布鲁斯狼
www.dw8.cn 缔吧
www.i0514.cn 小艾生活网
</textarea> <br>
<input type=button value="先选择文本框文本再单击本按钮" onclick=alert(document.selection.createRange().text)>
</form>


所以,应用了document.selection.createRange().text就能重新定义剪贴板中的值了。

选择复制本段文本,然后粘贴到文本编辑器中查看是不是多了一些附加信息。

<script type="text/javascript">
document.body.oncopy=function(){
 event.returnValue=false;
 var t=document.selection.createRange().text;
 var s="有关单击按钮将内容复制到剪贴板的原文内容地址: "+location.href;
 clipboardData.setData('Text',t+'\r\n\r\n'+s+'\r\n');
}
</script>


需要注意的是,该脚本执行要位于页面最低部。

出处:论坛转载 作者:佚名 点击:
 热点文章
·photoshop制作香烟、烟头、烟雾
·photoshop图片卷角、翻页效果的制作
·用U盘或移动硬盘装《深山红叶袖珍系统Win PE启动..
·photoshop经典恐怖片海报效果教程
·photoshop水晶球质感表现 - 关于光影的细节
·ghost.pif最新变种手动查杀,ARP欺骗挂马+KAV让..
·[css] table-layout:fixed 属性的解说,IE、Fire..
·photoshop制作3D立体小人和字体
·关于zend解密的程序
·自适应页面高度100%方法(表格直接100%高度没有效..
 推荐文章
·如何彻底删除一个不需要的系统服务
·模仿QQ和MSN消息提示的效果
·CC攻击的思路及防范方法
·广告联盟的一些评价
Powered by yici.net
CopyRight (C) 2006-2012 版权所有   [ 依次网 ];未经授权,任何人不得抄袭、仿冒本站
ICP备案:苏ICP备05011771号 证书下载 ICP证号:苏ICP证040301
仪征广目网络信息服务有限公司 版权所有