js移动端复制内容

在这里插入图片描述
点击按钮复制
这里用到了clipboard.js文件
文档地址 http://www.clipboardjs.cn/

<div class="invitationBtn">我的邀请码<div id="invitationBtn" data-clipboard-target="#Code" >一键<br>复制</div><span id="Code" class="Code">213</span></div>
$('#invitationBtn').click(function(){
        var clipboard = new ClipboardJS('#invitationBtn');
        // console.log(clipboard)
        clipboard.on('success', function(e) {
         // console.info('Action:', e.action);
         // console.info('Text:', e.text);
         // console.info('Trigger:', e.trigger);
            $('.Toast').show();//这是一个弹框 显示复制成功
            setTimeout(function(){
                $('.Toast').hide();
            },2000)
            e.clearSelection();
        });
    })

data-clipboard-target="#Code"
这个属性加上 后面的#code 是你要复制的div的id
还有很多方法可以看看文档去

切记一点,css点击样式有背景色,你在css里去掉的时候要注意是改成透明色,不是禁用!否则在移动端这个复制功能会失效。-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值