【前端面试基础--HTML】一键复制功能 02

作者：©Iaineisalsoyan
嘿，我又开始新的系列学习了！😊😊😊（上一系列的学习是30 天原生js编程挑战）。这次我开始准备面试题库了，和我一起进步吧！哦，对了，本系列的学习来源是 山月大佬的博客，他非常用心得整理了一份大厂面试题的项目，推荐大家去看看！

Have fun with the website! ♪(^∇^*)

一键复制功能描述

在一些博客网站中，可以看到代码区域的右上角会有一个复制的按钮，点击之后，可以迅速将代码框中的代码复制到剪切板上。

解决方案

1Clipboard API

1

navigator.clipboard.writeText(text);

2 选中+复制

对于不支持 Clipboard API 的浏览器，使用选中+复制的API进行复制。

• 选中 Selection API+Range API

1
2
3
4
5
6
7
8
9
10

const selection = window.getSelection();
const range = document.createRange();

// RangeAPI: 制造区域
range.selectNodeContents(element);

// Selection: 选中区域
selection.addRange(range);

selectedText = selection.toString();

• 复制: execCommand

1

document.execCommand("copy");

License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

Share