JS复制剪切神器clipboard.js

发布于：2025-01-01 00:00:00浏览：106次分类：JS特效查看分享码

提取码：PLJd

1.clipboard.js介绍
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;
2.常见的使用方法
通过target的function复制内容指定节点的值

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>clipboard使用</title>
    </head>
    <script src="js/clipboard.min.js"></script>
<body>
    <button class="btn">copy</button>
    <div id="copyCont">目标复制内容</div>
<script >
 var clipboard = new ClipboardJS('.btn', {
    target: function() {
         return document.getElementById('copyCont');
        }
    });
    /*复制成功*/ 
	clipboard.on('success', function(e) {
	    console.log(e);
	});
    /*复制出现失败的情况下*/ 
	clipboard.on('error', function(e) {
	    console.log(e);
	});
</script>
</body>
</html>

通过text的function复制内容，在text方法中放回复印的内容

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>clipboard使用</title>
    </head>
    <script src="js/clipboard.min.js"></script>
<body>
    <button class="btn">copy</button>
    <div id="copyCont">目标复制内容</div>
<script >
 var clipboard = new ClipboardJS('.btn', {
    text:function(){
        return "复制的内容哈哈哈"
    }
    });
    /*复制成功*/ 
	clipboard.on('success', function(e) {
	    console.log(e);
	});
    /*复制出现失败的情况下*/ 
	clipboard.on('error', function(e) {
	    console.log(e);
	});
</script>
</body>
</html>

通过id指定节点对象，这里的返回值的内容是data-clipboard-text的内容

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>clipboard使用</title>
    </head>
    <script src="js/clipboard.min.js"></script>
<body>
    <button id="btn" data-clipboard-text="1">copy</button>
<script >
    var btn=document.getElementById('btn');
    var clipboard = new ClipboardJS(btn);
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
</body>
</html>
</script>

通过class获取所有button按钮，并做为参数传送给Clipboard。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>clipboard使用</title>
    </head>
    <script src="js/clipboard.min.js"></script>
<body>
    <button class="btn" data-clipboard-text="copy1">Copy</button>
    <button class="btn" data-clipboard-text="copy2">Copy</button>
    <button class="btn" data-clipboard-text="copy3">Copy</button>
<script >
   var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
</body>
</html>