拷贝复制效果的实现

快来打我* 2023-01-08 02:08 151阅读 0赞

### 1、点击按钮/图标复制 通过鼠标拖拽选取的文本（拖蓝） ###

document.execCommand('copy'); // 执行copy命令，copy用户选择的文本到剪切板

此外，为了使拷贝复制功能更加健全，会加上是否进行鼠标拖拽文本，是否复制成功等一系列 判断

> 是否进行鼠标拖拽选取了文本

使用文本选区Selection对象相关的属性与方法即可

const txt=window.getSelection().toString();// 获取选区的文本内容，
       内容为空，表示未进行选取或选取动作无效

完整代码如下：

btn.onclick=function copyFn(){ 
        const txt=window.getSelection.toString();
        if(!txt){ 
            alert('未选取文本');
            return false
        }
        document.execCommand('cpoy');
        alert('选取成功')
    }

### 2、不经过鼠标拖拽直接实现点击复制拷贝效果 ###

> 实现思路：模拟鼠标拖拽实现文本选择的效果， 将要选中的文本复制到input元素或者textarea中，然后执行select() ，，，，然后执行拷贝命令

<div id="target">据云南省北迁亚洲象群安全防范工作省级指挥部消息,截至6月9日17时,象群总体朝西南方向迁移3.7公里,持续在玉溪市易门县十街乡活动。独象离群4天,于6月8日18时30分进入昆明安宁</div>

var textarea=document.createElement('textarea');
         textarea.value=document.getElementById('target').textContent;
         textarea.style.cssText = 'position:absolute;top:-999999px;'; // 让textare元素看不见，但是需要能正常获取其value
         document.body.appendChild(textarea);
         if(document.execCommand('copy')){  // 如果支持拷贝命令
            textarea.select();
            document.execCommand('copy');
         } 
         document.removeChild(textarea)