移动端实现点击复制文本到剪切版的功能

经常看到这样一种效果:就是单击一个按钮,就将某个区域内的内容,复制到了剪切板中。其实这个功能实现起来也不难。

(有关原生clipboardData对象调用剪切版的方法,这里不做介绍,因为这个原生对象仅在IE上面生效)

1.下载使用

npm i clipboard -S

2.将clipboard引入到页面上

<script src="../dist/clipboard.min.js"></script>

3.创建一个clipboard对象将参数传递到clipboard框架中

// 创建
        var copy = new ClipboardJS('.btn', { //这里传的是选择器!
            // 这里传的事件对象是触发的元素
            text: function (e) {
                let val = document.getElementById('copyText').innerHTML; 
                // 这里返回的是复制到粘贴版的内容
                return val
            }
        });

把这个对象赋值给copy是为了下面监听clipboard的成功状态

4.监听clipboard的成功状态,判断是否复制到剪切版上

copy.on("success", () => {
            alert("复制成功")
        })
        copy.on('error', () => {
            alert("复制错误")
        })

5.End(下班啦~回家收衣服了)
 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值