轻量级文本复制到剪贴板插件clipboard.js示例，不需要Flash
现代化的复制到剪切板插件clipboard.js, 不需要Flash就可以实现拷贝功能，体积小，压缩后仅3KB，简单易使用。本文结合bootstrap提供多种”拷贝“示例。
入门指南
使用教程
1.引入脚本(核心是clipboard.min.js)
<link href="css/bootstrap-3.3.7.min.css" rel="stylesheet">
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap-3.3.7.min.js" type="text/javascript"></script>
<script src="js/clipboard/clipboard.min.js" type="text/javascript"></script>
2.CSS样式
.example {
position: relative;
margin: 15px 0 0;
padding: 50px 19px 14px;
background-color: #fff;
border-radius: 4px 4px 0 0;
border: 1px solid #ddd;
z-index: 2;
}
.example:after {
position: absolute;
top: 0;
left: 0;
padding: 2px 8px;
font-size: 12px;
font-weight: 700;
background-color: #f5f5f5;
color: #000;
border-radius: 4px 0 4px 0;
}
.example .btn {
position: absolute;
top: 4px;
right: 4px;
}
.one:after {
content: "Input示例";
}
3.HTML内容
<div class="example one">
<input type="text" class="form-control" id="inputElement" value="INPUT: clipboard.js现代化的复制到剪切板插件，不需要Flash。">
<button class="btn btn-success btn-copy" type="button" data-clipboard-target="#inputElement">
<i class="glyphicon glyphicon-copy"></i>拷贝(Copy)
</button>
</div>
4.JavaScript脚本初始化
$(function () {
$('.btn-copy').attr("title", "复制到剪贴板").tooltip("fixTitle");
var clipboard = new ClipboardJS('.btn-copy');
clipboard.on('success', function (t) {
$(t.trigger).attr("title", "已复制！").tooltip("fixTitle").tooltip("show").attr("title", "复制到剪贴板").tooltip("fixTitle");
t.clearSelection();
});
clipboard.on('error', function (t) {
$(t.trigger).attr("title", "出错了").tooltip("fixTitle").tooltip("show").attr("title", "复制到剪贴板").tooltip("fixTitle");
});
});
这样就完成了clipboard.js拷贝到粘贴板的示例，希望对大家有帮助。
the end
