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

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

(有关原生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(下班啦~回家收衣服了)
 

猜你喜欢

转载自blog.csdn.net/qq_40146638/article/details/89242635