admin管理员组文章数量:1564210
移动端js实现点击复制到剪贴板,带提示,【真正】兼容所有浏览器,包括安卓和ios及uc、qq、微信、手机自带等浏览器。
20190716更新npm安装
react-to-copy
vue-to-copy
github,欢迎star:
https://github/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="https://libs.baidu/jquery/2.0.0/jquery.min.js"></script>
引入js
<script src="https://www.love85g/cdn/copy/jquery.copy.min.js"></script>
使用办法:
$.copy({
imgUrl:"success-tips.png", //分享图标地址
text:"复制成功", //分享提示文案
copyUrl:"", //自定义复制链接地址
tipTime:2000, //分享提示消失时间
copyId:"#copy"//复制按钮id
});
扩展:(单页面多个复制功能)
var data = [
{
"url":"www.baidu",
},
{
"url":"www.qq",
},
{
"url":"www.163",
}
];
$.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
});
});
版权声明:本文标题:移动端js实现点击复制到剪贴板,【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727476059a1116506.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论