js点击复制文本
来源:互联网 发布:民航网络信息安全 编辑:程序博客网 时间:2024/05/21 14:08
有些时候,我们希望让用户在网页上完成某个操作就能自动将指定的内容复制到用户计算机的剪贴板中。
但是出于安全原因,大多数现代浏览器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用)。
只有IE浏览器可以通过如下方式来进行复制。
window.clipboardData.setData("Text", "这里是需要复制的文本内容")但想要实现跨浏览器的复制功能,我们就可以使用 ZeroClipboard。
ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件,它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard 的时候,它会悄悄隐藏一个小小的 Flash 影片(swf),不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了。ZeroClipboard 中的 "Zero" 指的就是"不可见,零干扰"。
不过从 Flash 10开始,由于浏览器和Flash的安全限制,要求用户必须在Flash区域上进行真实操作才能操作剪贴板。于是,ZeroClipboard 的作者想到一个办法:它将 Flash 做成透明的,以便于我们放在诸如链接、按钮等需要放置的任何地方。这样,用户界面看起来没有变化,当点击链接或按钮时,实际上点击是却是 Flash,从而实现复制操作。
使用 ZeroClipboard 的方法非常简单,我们只需要在页面中引入它的一个JS文件并稍作配置(最简单只需一行代码)即可(实际上还需要引入一个Flash的swf文件,不过 ZeroClipboard 会自动引入它)。
示例代码:
<!-- 这里是HTML代码部分 --><textarea id="content" rows="10" cols="60">这里是需要复制的内容</textarea><input id="copy" type="button" data-clipboard-target="content" value="复制"><!-- 这里是JS代码部分 --><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js" ></script><script type="text/javascript">// 将【复制】按钮充当复制数据的元素载体var clip = new ZeroClipboard( document.getElementById("copy") );</script>
以上就是引入并使用 ZeroClipboard 的最简代码。我们为【复制】按钮指定了
data-clipboard-target
属性,其值为将被复制数据的元素id。此时,我们点击【复制】按钮就可以复制id为content的textarea中的文本数据。你可以点击这里 运行代码ps: 需要源码示例demo, 可留邮箱。
1 0
- js点击复制文本
- js实现文本点击复制整理
- JS点击自动复制文本代码
- 点击按钮 复制文本
- js操作剪贴板,实现点击按钮复制文本功能
- 点击按钮 复制文本 使用clipboard.js复制页面内容到剪切板
- js 复制文本内容
- js点击复制代码
- js 点击复制
- JS 点击复制Copy
- JS点击复制
- JS 点击复制Copy
- JS 点击复制Copy
- JS 点击复制 zclip
- 手机点击复制js
- JS 点击复制Copy
- JS 点击复制Copy
- js 点击复制
- OkHttp的实现原理(一)之同步
- jQuery方法扩展代码整理
- 程序员的鄙视链
- yarn资源隔离
- mysql无法更改初始密码,mysql忘记登录密码
- js点击复制文本
- ProtocolBuffer Java Jar 生成指导
- Git推送报错:The remote end hung up unexpectedly的解决办法
- MySQL数据库悲观锁总结和实践
- Java分层软件模型以及Hibernate Api简介
- 如何把超大sql文件导入阿里云RDS数据库
- 二叉树的非递归遍历
- MySchool第六章
- 面向对象(子父类中函数的特点-覆盖)