悠悠楠杉
网站页面
使用方法很简单,把.btn改成你需要点击复制的元素里的class或者id,再把www.zzwws.cn替换你需要点击复制的内容即可!
<script src="https://cdn.bootcss.com/clipboard.js/1.5.15/clipboard.min.js"></script>
<script>
// 第一种,点击btn按钮,直接通过text直接返回复印的内容
var clipboard = new Clipboard('.btn', { // 最新版本用ClipboardJS()
text: function() {
return 'www.zzwws.cn';
}
});
// 第二种
/*
剪切
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
复制
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
var clipboard = new Clipboard('.btn');
*/
clipboard.on('success', function(e) {
console.log(e);
e.clearSelection();// 清除选中状态
clipboard.destroy();// 释放内存
});
clipboard.on('error', function(e) {
console.log(e);
e.clearSelection();// 清除选中状态
clipboard.destroy();// 释放内存
});
$(".btn").on("click", function (event) {
event.stopPropagation();// 阻止事件冒泡和事件捕获
// event.stopImmediatePropagation();// 阻止同层级事件的冒泡,后面出现的btn点击事件不会执行
});
// 第三种,使用Clipboard API和document.execCommand,不用clipboard
$(".btn").on("click", function (event) {
copyToClip('内容');
});
function copyToClip(content,success = '',error = '') {
var textarea = document.createElement('textarea');
textarea.value = content;
document.body.appendChild(textarea);
textarea.select();
var res = document.execCommand("copy");
document.body.removeChild(textarea);
if(res){
// console.log("文本已成功复制到剪贴板");
if(typeof success === 'function'){
success();
}
}else{
if(typeof navigator.clipboard !== "undefined"){
navigator.clipboard.writeText(content)
.then(function() {
// console.log("文本已成功复制到剪贴板");
if(typeof success === 'function'){
success();
}
})
.catch(function(err) {
// console.error("无法复制文本到剪贴板", err);
if(typeof error === 'function'){
error();
}
});
}else{
// console.log("无法复制文本到剪贴板");
if(typeof error === 'function'){
error();
}
}
}
}
</script>