2022-12-09 6418
浏览网站时,我们经常看到一些点击复制一段文本的内容,比如 点击复制网页文件地址。
这个功能是怎么实现的呢?
其实需求不复杂的话,很简单。主要用到的就是 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 = `<script>${temp}<\/script>`; // 选择的内容来自指定节点 range.selectNode(text); // 先选中 selection.addRange(range); // 执行 “copy” 命令 document.execCommand("copy"); text.innerHTML = temp; // 让文本恢复原样 // 去掉所有的被选择范围 selection.removeAllRanges(); }
搞定。
这里要说明的是,最后一步一定要再次去掉所有已被选择的范围。否则,文本会被选中。
而我们希望的是,点击“复制”后,就像什么事都没发生的一样。因此,最后要再一次去掉所有已被选择的范围。
本文链接:https://blog.lingruofeng.com/seo/43.html
版权声明:本站部分素材来自网络整理,如侵犯了您的合法权益,请联系我们删除!
扫码二维码
获取最新动态
个人博客