clipboard.js实现一键复制

来源：互联网发布：淘宝指数查询软件编辑：程序博客网时间：2024/04/28 17:12

本人在开发过程中，需要一个【一键复制】的功能，但网上的方法大多是通过swf文件来做的，今天为大家介绍一个方法，只需要引入一个js，就可以实现一键复制功能，简单快捷，而且兼容性好。下面是具体代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>复制信息</title><!-- 基础 --><link rel="stylesheet" href="../common/css/bootstrap.css"><link rel="stylesheet" href="../common/css/nifty.css"><link rel="stylesheet" href="../common/css/demo/nifty-demo.css"></head><body>    <div id="page-title"></div>    <div id="page-content">        <div class="col-sm-12 eq-box-sm">            <div class="panel lion-fullHeight">                <div class="panel-body">                    <div class="form-group" id="copydiv">                        <p>分享时间 : 2017-10-13 10:22:27</p>                        <p>查看密码 : mjwy</p>                        <p>可阅读次数 : 无限制</p>                        <p>访问地址 : https://pan.baidu.com/s/1pKLbVnl </p>                    </div>                </div>            </div>        </div>        <div class="navbar-fixed-bottom panel-footer" style="position: absolute; text-align: center">            <div class="row">                <div class="col-sm-7 col-sm-offset-5">                    <button class="btn btn-mint" id="copybtn" data-clipboard-action="copy" data-clipboard-target="#copydiv">复制</button>                </div>            </div>        </div>    </div></body><!-- 基础 --><script type="text/javascript" src="../common/js/jquery-2.2.4.min.js"></script><!-- 实现复制功能的js --><script type="text/javascript" src="../common/js/clipboard.min.js"></script><!-- layer --><script type="text/javascript" src="../common/plugins/layer/layer.js"></script><script type="text/javascript">    $(document).ready(function() {        //         var clipboard = new Clipboard('#copybtn');        clipboard.on('success', function(e) {            parent.layer.msg("复制成功!", {                icon : 1,                time : 1500            })        });        clipboard.on('error', function(e) {             parent.layer.msg("复制失败，请手动复制!", {                icon : 2,                time : 1500            })        });    });</script></html>

附上所需js的下载地址和密码
https://pan.baidu.com/s/1pKLbVnl
密码：mjwy

阅读全文

0 0