复制粘贴插件clipboard.js

<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>
复制粘贴插件clipboard.js

猜你喜欢
