JS剪贴板（execCommand/clipboard）

①execCommand

document.execCommand( )会返回一个布尔值，表示操作是否成功。

目前已经兼容所有主流浏览器

example 01

 <button onclick="copy(\'lalala\')">click</button>
 
 <script>
    function copy(content){
        var aux = document.createElement("input"); 
        aux.setAttribute("value", content); 
        document.body.appendChild(aux); 
        aux.select();
        var flag = document.execCommand("copy"); 
        document.body.removeChild(aux);
        if (flag == true) {
            alert("复制成功");
        } else{
            alert(flag);
        }
    }
 </script>

①点击按钮
②执行函数，创建一个输入栏，值为onclick事件传递的参数。
③选中文本，用 document.execCommand( )方法复制到剪贴板
④移除input元素

example 02

<input id="scanf" type="text" autocomplete="off">

<button onclick="copy()">click</button>
<script>
    function copy(content){
        var aux = document.getElementById("scanf"); 
        aux.select();
        var flag = document.execCommand("copy"); 
        if (flag == true) {
            alert(flag);
        } else{
            alert(flag);
        }
    }
</script>

自动清空输入框
autocomplete的作用是定义是否让浏览器自动记录之前输入的值，默认是on，所以要设置为off

example 03

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
execCommand() 方法的定义中提到，它只能操作可编辑区域，这就是说别的类型元素无法触发select事件。

这里我想实现的效果是不需要使用onclick也不用自己去确认id

<p id="a">Do not go gentle into that good night,</p>
<p id="b">Old age should burn and rave at close of day;</p>
<p id="c">Rage, rage against the dying of the light.</p>

<script>
    var t = document.getElementsByTagName(\'p\');
    for (var i = 0; i < t.length; i++) {
        t[i].onclick = function () {
            f = this.innerText;
            var e = document.createElement("input");
            e.setAttribute("value", f);
            document.body.appendChild(e);
            e.select();
            var flag = document.execCommand("copy");
            document.body.removeChild(e);
        }
    }    
</script>

①用getElementsByTagName获取元素
②在循环内为每个元素添加点击事件
③添加<input>，execCommand("copy")，删除

②clipboard

clipboard.js是一个第三方库

example 01

clipboard.js实现JS复制文本

参考了这个例子

首先使用CDN

<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.js"></script>

然后body标签内的代码如下：

<div>
    <!--需要被复制的对象1-->
    推荐码：<span>123456</span>
</div>
<button>复制按钮</button>
<script>
    //绑定点击事件
    document.querySelector(\'button\').onclick = copy();
    function copy() {
        //通过function复制
        var clipboard = new Clipboard(\'button\', {
            // 通过target选择需要被复制的对象
            target: function () {
                return document.querySelector(\'span\'); //复制标签文本
            }
        });

        clipboard.on(\'success\', function (e) {
            //复制成功之后的回调
            console.log(e);
            //提示：这里是个坑,需要手动销毁当前的clipboard,否则会触发两次事件
            clipboard.destroy();
        });

        clipboard.on(\'error\', function (e) {
            //执行失败后需要做的事...
            console.log(e);
            clipboard.destroy();
        });
    }
</script>

我没看懂API，所以我准备先读代码。
虽然这是一个只用来实现复制粘贴的API但是我还是看不懂。

③window子对象clipboardData

因为安全原因，只有ie可以使用。补救方法是zeroclipboard.js，相对来说比较复杂。
看了一点这个：
js 剪切板的用法(clipboardData.setData)