手机端H5复制,JS实现点击复制功能

热度:212020-08-01 08:55 收藏 0 点赞 0

对应前端而言,点击复制功能肯定有遇到过,网页自带的点击复制老是会出问题,在各个端不兼容的情况,下面我就介绍应用最广的js点击复制功能实现。

首先,需要引入一个clipboard.js 

点击下载clipboard.zip


其次,页面写入如下js代码:

$(function(){
	var clipboard = new ClipboardJS('.btn');

	clipboard.on('success', function(e) {
		console.info('Action:', e.action);
		console.info('Text:', e.text);
		console.info('Trigger:', e.trigger);
		alert('成功!');
		
	});

	clipboard.on('error', function(e) {
		console.error('Action:', e.action);
		console.error('Trigger:', e.trigger);
		alert('失败!');
	});

})

之后,在你需要点击复制的地方加入如下代码:

<span id="copy" >点击按钮后,这里的内容将被复制</span> <button class="btn" data-clipboard-action="copy"  data-clipboard-target="#copydata" type="button">点击复制</button>


从上面的代码可以看出,data-clipboard-target 绑定了复制的内容的ID,

class="btn" data-clipboard-action="copy"

 上面的是点击地方的参数,不能修改。


好了,只需要将上面的代码了解清楚,点击复制就可以轻松实现了!

暂无评论
登录后才可以评论~立即登录

如何获取资源?

您可以关注底部公众号,回复文章提示的 “ 关键词 ” 获取对应资源。

每日分享

每日分享收集的网络资源,其中包含开源项目、小工具、常用软件,以及音频视频、电子书籍等。

爱奇艺万能播放器2018年完整版

爱奇艺万能播放器2018年完整版

2018年的爱奇艺万能播放器,功能齐全,没有广告!

分享500套个人求职简历模板

分享500套个人求职简历模板

500套免费求职简历下载!

一款最近很火的自动跳过广告APP,无root直装版

一款最近很火的自动跳过广告APP,...

自动跳过广告,无需root

WPS免费去广告电脑软件

WPS免费去广告电脑软件

wps广告实在太多了,下载一个去广告版本

强制突破进入好友QQ空间

强制突破进入好友QQ空间

一款突破好友进入QQ空间的软件

爱奇艺99元一年VIP

爱奇艺99元一年VIP

99元一年爱奇艺vip,速度撸!