JS实现点击复制目标内容

在实际应用中，我们经常看到这样一种效果：就是单击一个按钮，就将某个区域内的内容，复制到了剪切板中。其实这个功能实现起来也不难，核心就是用到了window子对象clipboardData的一个方法：setData()，直接上代码：

<div id="copyTarget">
    我是你要复制的目标
</div>
<button id="btnCopy">点击我复制目标文本</button>

<script>
    document.getElementById('btnCopy').onclick = function () {
        var text = document.getElementById('copyTarget').innerText;
        clipboardData.setData("text", text);   //第一个参数是复制内容的格式，第二个参数是要复制的内容
        console.log('复制成功了');
    }
</script>

clipboardData这个方法很方便，它还支持了clearData(sDataFormat) 删除剪贴板中指定格式的数据和getData(sDataFormat) 从剪贴板获取指定格式的数据两种方法，但是，用过这个方法的人都应该知道，这种方法在chrome浏览器不起任何作用，那么在chrome浏览器中我们该怎么办呢？请看下面的代码：

<div id="copyTarget">
    我是你要复制的目标
</div>
<!-- 这里需要用一个textarea或者input框来接收要复制的目标值，因为方法中的selec()属性是不支持其他标签 -->
<!-- 我们可以用一个样式讲接收的容器隐藏起来 -->
<textarea id="inputBox" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"></textarea>
<button id="btnCopy">点击我复制目标文本</button>

<script>
    document.getElementById('btnCopy').onclick = function () {
        const copyTarget = document.getElementById('copyTarget');
        const copyBox = document.getElementById('inputBox');
        copyBox.value = copyTarget.innerText;
        copyBox.select();
        document.execCommand('copy');
        console.log('复制成功');
    };
</script>