在实际应用中,我们经常看到这样一种效果:就是单击一个按钮,就将某个区域内的内容,复制到了剪切板中。其实这个功能实现起来也不难,核心就是用到了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>