admin管理员组

文章数量:1562461

移动端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