您的位置：首页 > Web前端 > JavaScript

clipboard.js实现一键复制

2017-10-13 10:25 260 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航