官网
https://github.com/zenorocha/clipboard.js
使用
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS复制粘贴</title>
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.js"></script>
</head>
<body>
<button class="btn" data-clipboard-text="随便写点东西1">点击复制</button>
<input type="text" id="copyVal" readonly value="随便写点东西2" />
<button class="btn1" data-clipboard-target="#copyVal">点击复制1</button>
<button class="btn2">点击复制2</button>
<button class="btn3">点击复制3</button>
<script>
var copyBtn = new ClipboardJS('.btn');
copyBtn.on("success", function (e) {
// 复制成功
alert(e.text);
});
copyBtn.on("error", function (e) {
//复制失败；
console.log(e.action)
});
var copyBtn1 = new ClipboardJS('.btn1');
copyBtn1.on("success", function (e) {
// 复制成功
alert(e.text);
e.clearSelection();
});
copyBtn1.on("error", function (e) {
//复制失败；
console.log(e.action)
});
//如果不想再html中添加特性
new ClipboardJS('.btn2', {
text: function (trigger) {
//例如获取js获取多个元素最终拼接字符串
alert('随便写点东西3')
return "随便写点东西3";
},
});
var btn3Copy = new ClipboardJS('.btn3', {
target: function (trigger) {
return document.querySelector('#copyVal');
},
});
btn3Copy.on("success", function (e) {
// 复制成功
alert(e.text);
e.clearSelection();
});
btn3Copy.on("error", function (e) {
//复制失败；
console.log(e.action)
});
</script>
</body>
</html>
复制上面的代码，点击按钮查看效果吧
参考
https://github.com/lgarron/clipboard-polyfill
https://github.com/zenorocha/clipboard.js
https://github.com/Inndy/vue-clipboard2
https://github.com/nkbt/react-copy-to-clipboard