项目中遇到的问题5：单击复制文本

最新推荐文章于 2021-12-01 16:20:45 发布

原创最新推荐文章于 2021-12-01 16:20:45 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

15 篇文章

订阅专栏

问题汇总

8 篇文章

订阅专栏

本文介绍了一种巧妙的网页文本复制方法，通过隐藏的输入框实现对特定文本的复制，适用于网页开发与用户体验优化。

<span id="copy">要复制的文本</span>
<p onclick="clickCopy()" style="color: #66b1ff">点击复制</p>
<input id="copyContent" type="text" style="border:none;opacity:0;position:absolute;top:0;left:0;">


function clickCopy() {
    let target = document.getElementById('copy');
    let content = target.innerText;
    let inputObj = document.getElementById('copyContent');
    inputObj.value = content;
    inputObj.select();
    document.execCommand("Copy");
    alert('复制成功');
}

原理：首先要先添加一个空的input框，这个是用来存储要复制的文本的，将input框的颜色设置为透明，定位到影响不到内容的地方，获取要复制元素，获取到元素中的文本，获取到input框，将获取到的文本赋值给input框，执行select方法，选中input中的所有文本，使用document.execCommand(“Copy”)方法复制文本

document.execCommand：允许对可编辑内容区域的内容进行操作