Jquery配合clipboard.js实现复制指定文本
2020-02-11 本文已影响0人
前端组件库
1.首先我们引入Jquery和clipboard.js在头部
在<body>和</body>之间插入：
https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js
https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js
2.要复制的目标文本
<div id="content">这里是要复制的文本</div>
3.触发复制的按钮
<button class="btn">复制</button>
4.实现功能的主要JS
var content = $("#content").text();
//引入实例化clipboard.js, 注意这里不要用Clipboard而是ClipboardJS
var clipboard = new ClipboardJS('.btn', {
text: function() {
return content;
}
});
//如果成功复制的话
clipboard.on('success', function(e) {
alert("复制成功");
});
//如果复制失败
clipboard.on('error', function(e) {
alert("复制失败");
});
