100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 移动端js实现点击复制到剪贴板 【真正】兼容所有浏览器uc qq 微信 手机自带等浏览器...

移动端js实现点击复制到剪贴板 【真正】兼容所有浏览器uc qq 微信 手机自带等浏览器...

时间:2023-11-16 10:23:59

相关推荐

移动端js实现点击复制到剪贴板 【真正】兼容所有浏览器uc qq 微信 手机自带等浏览器...

移动端js实现点击复制到剪贴板,带提示,【真正】兼容所有浏览器,包括安卓和ios及uc、qq、微信、手机自带等浏览器。

github,欢迎star:

/majiang666/copy.git复制代码

查看demo

前言:在移动端上经常会遇到这样的需求,第一种就是点击复制当前页面的链接,第二种就是类似卡券的功能,需要复制密码等,之前需求太紧急,基本上都使用了clipboard.js ,使用方法也很简单:(这种办法也会有很多浏览器及机型是不支持的,只能来做降级处理,提示用户去手动复制,但是假如遇到复制卡券这种隐藏值得时候就有问题了,只能在不支持的时候提示及把值再放一遍,用于手动复制,虽然解决了但是还是不完美。)

<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">Cut to clipboard</button>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);e.clearSelection();});clipboard.on('error', function(e) {console.error('Action:', e.action);console.error('Trigger:', e.trigger);});复制代码

也有比如ZeroClipboard等实现方式。当然了,今天来介绍的是之前在做项目的时候用到的办法,又重新用jquery做了一个插件版的,可以说兼容所有移动端浏览器,自己试了安卓华为自带浏览器、uc浏览器、qq浏览器、iphoneX上的safari浏览器、微信内置浏览器等(假如有不支持的留言告诉我),使用办法也很简单:

引入jquery

<script src="/jquery/2.0.0/jquery.min.js"></script>复制代码

引入js

<script src="/cdn/copy/jquery.copy.min.js"></script>复制代码

使用办法:

$.copy({imgUrl:"success-tips.png", //分享图标地址text:"复制成功", //分享提示文案copyUrl:"", //自定义复制链接地址tipTime:2000, //分享提示消失时间copyId:"#copy"//复制按钮id});复制代码

扩展:(单页面多个复制功能)

var data = [{"url":"",},{"url":"",},{"url":"",}];$.each(data,function(i,item){$("body").append('<button id="copy'+i+'">复制链接</button>');$.copy({imgUrl:"success-tips.png", //分享图标地址text:"复制成功", //分享提示文案copyUrl:item.url, //自定义复制链接地址tipTime:2000, //分享提示消失时间copyId:"#copy"+i //复制按钮id});});复制代码

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。