移动端复制按钮(点击复制,clipboard.js)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Tomhs3000/article/details/78059532

一句话介绍下clipboard.js:实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。

我们可以通过以下方式获取到clipboard.js:

1、可以使用cdn

    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>    

2、也可以下载后引入(如果文件过期可以在评论通知我)
链接:https://share.weiyun.com/95dc49ba3ee0a9c26fe04e1a160b8e41 (密码:DE6x8U)

3、当然可以去官网下载
官网

接着我们可以写一个使用的demo:

<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>   
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>    
    <script src="clipboard.js"></script>    
    <title>复制按钮</title>    
</head>    
<body>    
<span id="target">我是一段优美的文字</span>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">    
    复制按钮    
</button>    
    
</body>    
<script>    
    $(document).ready(function(){       
        var clipboard = new Clipboard('#copy_btn');    
        clipboard.on('success', function(e) {    
            alert("复制成功",1500);    
            e.clearSelection();    
            console.log(e.clearSelection);    
        });    
    });    
</script>    
</html>    

代码并不复杂,data-clipboard-target绑定的是目标标签,如果你只是复制一段固定的内容,也可以在触发器元素里添加data-clipboard-text属性(demo中即button);data-clipboard-action属性有两个值,一个是copy复制一个是cut剪切,但是剪切只在<input>或<textarea>中生效,默认值是copy。除了复制用户输入的内容,固定内容,还可以用户分享链接等..........

4、当然clipboard.js亦会存在一些兼容问题,下面是官网上的各浏览器支持情况

在网上看到了一些解决方案,比如二次封装等...那时候自己是用了一个比较偷懒的方式....想起来真是脸红
            clipboard.on('success', function(e) {
                e.clearSelection();
                alert("复制成功!");
            });
            clipboard.on('error', function(e) {
                alert("当前浏览器不支持此功能,请手动复制。")
            });
这是clipboard自带成功与失败的回调函数。

PS:Clipboard.isSupported()可以用来查看浏览器是否支持。
PS2:以上为基本用法,需深入了解的同学跳转官网

展开阅读全文

没有更多推荐了,返回首页