复制粘贴插件clipboard.js

最新推荐文章于 2024-06-12 10:42:10 发布

catherinawwww

最新推荐文章于 2024-06-12 10:42:10 发布

阅读量682

点赞数

分类专栏：技术资料文章标签：复制粘贴

本文链接：https://blog.csdn.net/weixin_38747509/article/details/83113888

版权

技术资料专栏收录该内容

188 篇文章 1 订阅

订阅专栏

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta name="format-detection"content="telephone=no">
    <title>复制粘贴插件clipboard.js小例子</title>
    <style>
        body{width: 100%;}
        .wrap{position: absolute;z-index: 10;display: none;}
        .inner{position: relative;width: 100%;height: 100%;}
        #copyinfo{position: absolute;width: 180px;height:50px;padding: 30px;top:30%;left:50%;margin-left:-120px;text-align:center;color: #fff;font-size: 12px; background-color: rgba(0,0,0,0.8);border-radius: 10px;}
        .btn{position: absolute;width:200px;height: 40px;line-height: 40px; margin:100px auto 0;left:50%;margin-left:-100px;color:#fff;background-color: #3BCDCB;border-radius: 10px;border: none;}
    </style>
</head>
<body>

    <button class="btn" data-clipboard-text="https://www.h5-share.com/">点击复制H5案例分享官网链接</button>

    <div class="wrap">
        <div class="inner">
            <div id="copyinfo"></div>
        </div>
    </div>
    
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script>
        var _w=document.body.clientWidth || document.documentElement.clientWidth;
        var _h=document.body.clientHeight || document.documentElement.clientHeight;
        $('.wrap').css({'width':_w+'px','height':_h+'px'});

        var clipboard = new Clipboard('.btn');

        clipboard.on('success', function(e) {
            console.log(e);
            $('.wrap').show();
            console.log('H5案例分享官网链接 '+e.text+' 已成功复制到剪切板');
            $('#copyinfo').html('H5案例分享官网链接<br />'+e.text+'<br />已成功复制到剪切板');
        });

        clipboard.on('error', function(e) {
            console.log(e);
        });

        $('.wrap').on('click',function(){
            $('.wrap').hide();
             $('#copyinfo').html('');
        });
    </script>
</body>
</html>

catherinawwww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制粘贴插件clipboard.js

&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt; &lt;meta name="viewport" content="wi
复制链接

扫一扫