很久没有更新博客了,有2个多月了快,主要是期末了,事情太多了~最后1个月,几乎都是天天加班中过的。尤其是最后两周,就没有在晚上11点离开办公室的。
唉~~
现在放假了,难得休息下,还是要好好给自己充充电,看点自己喜欢的东西,写点博客,免得荒废了技术。
-----------------------------------------------
在网上经常看到一些点击复制一段文本的内容,比如 bootcss上的点击复制文件地址。
这是怎么做到的?
其实需求不复杂的话,很简单。主要用到的就是 window的 selection 对象和Range对象,以及执行操作系统copy命令的代码。
HTML代码:
<span id="text">这个是一个很重要的文123字</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();
}
搞定。
扫描二维码关注公众号,回复:
14634327 查看本文章
点击“复制”后,粘贴出来的内容就是:
这里要说明的是,最后一步一定要再次去掉所有已被选择的范围。否则,文本会被选中。
而我们希望的是,点击“复制”后,就像什么事都没发生的一样。因此,最后要再一次去掉所有已被选择的范围。
其它更详细的内容可以查阅 MDN:
Selection对象
Selection - Web API 接口参考 | MDN
Range 对象