clipboard插件可以方便的将组件中的文本（或者是其他目标文本）复制到剪贴板上。我们可以在下面的网址获得到：

api： https://www.bootcdn.cn/clipboard.js/readme/

首先说一个遇到的问题。新版本中的构造函数是clipboardJS()，而不是clipboard()。因此在构造对象时，若遇到了下图的错误（非法构造器），则是构造方法写错了。

一、简单的demo

1. 引入clipboard.min.js

<script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

2.编辑组件

<div id="phone" class="tel" data-clipboard-text="" >
    电话号码是：17788889999
</div>

3.编辑js

<script type="text/javascript">
    //id选择器："#id"；class选择器：".tel"；
    var clipboard=new ClipboardJS("#phone");
    clipboard.on('success', function(e) {
        console.info('text',e.text);
    });
    $("#phone").attr({
        "data-clipboard-text": "17788889999"
    });

</script>

4.展示效果

点击文字后

二、使用详解

1. 从指定的目标源赋值文本

data-clipboard-target：指向复印节点。可以使用id选择器（#id）、标签选择器（div）等。

data-clipboard-action：该属性不指定，则默认值是copy；可以指定为cut。cut只能在input和textare标签中起作用。

<!-- eg1： -->
<input id="foo" type="text" value="hello" />
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制</button>

<!-- eg2: -->
<textarea id="bar">hello</textarea> 
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">点击复制</button>

<!-- eg3： -->
<div>hello_div</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">点击复制</button>


//js可以供以上三个例子使用：
<script>
    // 这里使用的是button的class的值。也可以使用id值(#id)
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);  //copy或者cut操作
        console.info('Text:', e.text);      //复制的文本内容
        console.info('Trigger:', e.trigger);    //触发的元素

    });
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
</script>

2.通过函数指定要复制的文本

下面四个例子分别对应四个不同的复制方法

<!-- eg1：复制target函数指定的结点内容 -->
<button class="btn">点击复制</button>
<div>这里是被复制的内容</div>
<script>
    var clipboard = new ClipboardJS('.btn', {
        //通过target指定要复印的节点
        target: function() {
            return document.querySelector('div');
        }
    });
    clipboard.on('success', function(e) {
        console.info("复制的内容",e.text);
    });
    clipboard.on('error', function(e) {
        console.error("e",e);
    });
</script>



<!-- eg2：复制text函数的返回值内容 -->
<button id="btn">点击复制</button>
<script>
    var clipboard = new ClipboardJS('#btn', {
        // 点击按钮，直接复制text函数的返回值
        text: function() {
            return '这里是被复制的文本内容';
        }
    });
    clipboard.on('success', function(e) {
        console.info("复制的内容",e.text);
    });
    clipboard.on('error', function(e) {
        console.error("e",e);
    });
</script>



<!-- eg3：通过指定的节点对象，传参给Clipboard。复制data-clipboard-text中的内容 -->
<div id="btn" data-clipboard-text="这里是被复制的内容">
    <span>点击复制</span>
</div>
<script>
    /*var btn = document.getElementById('#btn');
    var clipboard = new ClipboardJS(btn);*/
    var clipboard = new ClipboardJS("#btn");
    clipboard.on('success', function(e) {
        console.info("复制的内容",e.text);
    });
    clipboard.on('error', function(e) {
        console.error("e",e);
    });
</script>



<!-- eg4：复制多个dom结点中指定的文本内容 -->
<button class="button" data-clipboard-text="这里是被复制的文本内容1">无论点击哪一个按钮都复制三个按钮中属性指定的文本内容1</button>
<button class="button" data-clipboard-text="这里是被复制的文本内容2">无论点击哪一个按钮都复制三个按钮中属性指定的文本内容2</button>
<button class="button" data-clipboard-text="这里是被复制的文本内容3">无论点击哪一个按钮都复制三个按钮中属性指定的文本内容3</button>

<script>
    /**
    //通过标签结点构造对象
    var btns = document.querySelectorAll('button');
    var clipboard = new Clipboard(btns);
    */
    //通过类名构造对象
    var clipboard = new Clipboard(".button");
    clipboard.on('success', function(e) {
        console.info("e",e);
    });
    clipboard.on('error', function(e) {
        console.error("e",e);
    });
</script>

小白使用clipboard剪贴板插件