您的当前位置:首页js实现点击复制当前文本到剪贴板功能(兼容所有浏览器)_javascript技巧

js实现点击复制当前文本到剪贴板功能(兼容所有浏览器)_javascript技巧

2020-11-27 来源:哗拓教育
最近做项目时,在网站框架搭建过程,有一个功能需要实现复制文本到剪贴板,相信这个功能很常用,但是对于不常写JS代码的我来说是一个比较大的挑战,回想以前做过的一个站点,使用window.clipboardData实现复制到剪贴板功能,也仅仅支持IE和FF浏览器,当时在百度找个几个方案,看不下去就放弃了,后来在代码中做了判断,如果不支持该属性,就直接alert:此功能不支持该浏览器,请手工复制文本框中内容。有没有人遇到同样情况?



今天就为大家分享使用复制到剪贴板功能,由于能力有限,有错误的地方还请大家多多指教~

相信很多使用wordpress搭建过站点的同学都知道它采用了jQuery,对jQuery大家并不陌生,使用起来非常简单,可惜jQuery本身并没有实现复制到剪贴板的功能,但或许它的API会有这个功能。这次我搭建的站点采用wordpress,花了点时间搜索jQuery复制到剪贴板的API,还真的有:jQuery ZeroClipboard ,于是使用它在wordpress简单实现了复制到剪贴板的功能。但是呢,jQuery ZeroClipboard原来是有个父亲大人,叫Zero Clipboard。

Zero Clipboard作为一个独立的js库,它利用 Flash 进行复制,需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 。网络上有2个版本,实现原理都是使用flash进行复制,不知道原创是谁的,也可能一家子的2个兄弟,这个就不管了,只要我们自己做到尊重版权,表示问心无愧,今天给大家介绍的这个版本相对来说比较简单。

首先看下图是为使用Zero Clipboard后生成的flash对象,它能兼容的flash10及以下版本,兼容所有的浏览器:

Zero Clipboard的官方地址:http://zeroclipboard.org/,

使用它需要搭建服务器环境,可能有同学不太清楚,关于搭建服务器环境的,方法有很多,如xp或者win7系统自带的IIS,也可以使用xampp、appserv、APMServ等集成包,安装即可,搭建起来非常简单,这里不做介绍。

现在我们先使用独立的js库Zero Clipboard简单实现复制到剪贴板功能,demo如下:




Zero Clipboard Test






显示全文