clipboard.js实现一键复制

最新推荐文章于 2024-09-29 10:20:07 发布

温码

最新推荐文章于 2024-09-29 10:20:07 发布

阅读量1.1k

点赞数

分类专栏：学习笔记文章标签： javascript clipboard

本文链接：https://blog.csdn.net/born_mad/article/details/78222948

版权

学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本人在开发过程中，需要一个【一键复制】的功能，但网上的方法大多是通过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>