首页 > 开发 > 综合 > 正文

单击按钮复制定义好的内容到剪贴板

2024-07-21 02:04:20
字体:
来源:转载
供稿:网友

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

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

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

其语法是:clipboarddata.setdata(sdataformat, sdata)

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

比如:

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

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

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

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

<textarea cols=40 rows=10>
www.VeVb.com 网页设计
www.tangshanseo.cn 唐山seo
www.xiaoduzi.com 健康减肥网
</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>

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表