复制案例

最新推荐文章于 2020-11-30 19:58:05 发布

amyloverice

最新推荐文章于 2020-11-30 19:58:05 发布

阅读量408

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/amyloverice/article/details/80018154

版权

前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{

        }
    </style>
</head>
<body>

<!--使用很简单-->
<!--第一步：引入js库 <script src="../dist/clipboard.min.js"></script>-->
<!--第二步：定义标签（一般是触发复制的按钮）<button class="btn">Copy</button>-->
<!--第三步：实例化clipboard，调用构造函数var clipboard = new Clipboard('.btn');-->

<!--第一种 从变量赋值内容到剪贴板-->
<div>hello</div>
<button class="btn" >Copy</button>

<!--第二种 在button里定义属性data-clipboard-target和data-clipboard-action-->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

<!--input和textarea用法类似-->
<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

<textarea id="bar">hello</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>


<script src="lib/clipboard.min.js"></script>
<script>


//  第一种方法构造函数里定义target 从变量赋值内容到剪贴板
    var clipboard = new Clipboard('.btn', {

//        要复制的目标对象
        target: function() {
            return document.querySelector('div');
        },

//        复制的内容
        text: function() {
            return '你好啊';
        }
    });

//最重要的一点clipboard还定义了复制成功/失败的回调函数，方便我们去处理后面的逻辑
    clipboard.on('success', function(e) {
        alert("复制成功")
    });
    clipboard.on('error', function(e) {
        alert("复制失败")
    });
    
</script>
</body>
</html>