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

标点陆宇

标点陆宇

2016-02-20 00:39

下面是个简单易学的单击按钮复制定义好的内容到剪贴板教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

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

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

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

比如:

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

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

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

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

textarea cols=40 rows=10
www.webjx.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+'rnrn'+s+'rn');
}
/script

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

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

把图片框的完整内容复制到剪贴板

编程语言 网络编程
把图片框的完整内容复制到剪贴板

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

表单提交时自动复制内容到剪贴板的js代码

Web开发
表单提交时自动复制内容到剪贴板的js代码

Javascript如何复制内容到用户的剪贴板/剪切板

Web开发
Javascript如何复制内容到用户的剪贴板/剪切板

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

如何让Word2003复制内容时不存入剪贴板

电脑入门
如何让Word2003复制内容时不存入剪贴板

剪贴板创意改造 DIY闪光剪贴板图片教程

手工创意 diy手工 diy手工艺品 家庭手工制作 废旧物品手工制作
剪贴板创意改造 DIY闪光剪贴板图片教程

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

MAC退出应用的六大方法

MAC退出应用的六大方法

Mac如何使用钥匙串访问设置强密码

Mac如何使用钥匙串访问设置强密码
下拉加载更多内容 ↓