网站怎么实现点击复制功能?几行js代码搞定!

 2022-12-09    6146  

浏览网站时,我们经常看到一些点击复制一段文本的内容,比如 点击复制网页文件地址。

这个功能是怎么实现的呢?

其实需求不复杂的话,很简单。主要用到的就是 window的 selection 对象和Range对象,以及执行操作系统copy命令的代码。

HTML代码:

<span id="text">blog.lingruofeng.com</span>
<a href="javascript:void(0)" id="copy">点击复制</a>

JS代码:

// 获取标签
let copy = document.getElementById("copy");
let text = document.getElementById("text");
copy.onclick = function(){
    // 创建 Selection 对象,表示用户选择的文本范围或光标当前位置。
    let selection = window.getSelection();
    // 去掉所有的被选择范围。
    selection.removeAllRanges();
    // 重新创建选择范围
    let range = document.createRange();
    // 更改text标签内容,增加自定义的内容。这里模仿 bootcss 头尾增加<script>标签
    // 利用模版字符串,更方便。
    let temp = text.innerHTML.trim();
    text.innerHTML = `&lt;script&gt;${temp}&lt;\/script&gt;`;
    // 选择的内容来自指定节点
    range.selectNode(text);  // 先选中
    selection.addRange(range);
    // 执行 “copy” 命令
    document.execCommand("copy");
    text.innerHTML = temp;   // 让文本恢复原样
    // 去掉所有的被选择范围
    selection.removeAllRanges();
}

搞定。

这里要说明的是,最后一步一定要再次去掉所有已被选择的范围。否则,文本会被选中。

而我们希望的是,点击“复制”后,就像什么事都没发生的一样。因此,最后要再一次去掉所有已被选择的范围。

分享到:
  •  标签:  
  • js
  •  

本文链接:https://blog.lingruofeng.com/seo/43.html

版权声明:本站部分素材来自网络整理,如侵犯了您的合法权益,请联系我们删除!