一.展示

1.代码展示

<!DOCTYPE html>
<html>
<head><title>Copy Text to Clipboard</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>p{text-indent: 2em;}div{width: 500px;height: 800px;margin: 0 auto;margin-top: 50px;background-color: #282c34;color: #abb2bf;font-size: 20px;font-family: 幼圆;position: relative;}button{width: 40px;height: 30px;position: absolute;right: 0;color: white;background-color: black;cursor: pointer;border: none;text-align: center;}button:hover{background-color: #9999AA;color: #ffffff;}#text-to-copy .head{padding-top: 33px;text-indent: 2em;}</style>
</head>
<body><!-- 点击按钮后将该div块内的文本内容复制到剪切板 --><div id="text-to-copy"><button onclick="copyText()">Copy</button><p class="head">中国共产党第二十次全国代表大会，是在全党全国各族人民迈上全面建设社会主义现代化国家新征程、向第（  ）个百年奋斗目标进军的关键时刻召开的一次十分重要的大会。</p><p>面对突如其来的新冠肺炎疫情，我们坚持（  ），坚持动态清零不动摇，开展抗击疫情人民战争、总体战、阻击战，最大限度保护了人民生命安全和身体健康，统筹疫情防控和经济社会发展取得重大积极成果</p><p>全党同志务必不忘初心、（  ），务必谦虚谨慎、艰苦奋斗，务必敢于斗争、善于斗争，坚定历史自信，增强历史主动，谱写新时代中国特色社会主义更加绚丽的华章</p></div><script type="text/javascript">function copyText() {var range = document.createRange();range.selectNode(document.getElementById("text-to-copy"));window.getSelection().removeAllRanges();window.getSelection().addRange(range);try {// 复制选中文本到剪贴板中document.execCommand("copy");alert("已成功复制到剪切板！");} catch (err) {console.error("无法通过JavaScript复制到剪切板");}// 清空当前选择区域window.getSelection().removeAllRanges();}</script>
</body>
</html>

2.实际效果展示

二.具体实现

1.创建range对象

在Web开发中，Range对象是Web API标准之一，用于表示文档中的某个区域或选中的文本块。通过Range对象可以获取或设置文本节点、HTML元素或XML元素的内容、属性和样式等相关信息。

具体的应用场景有：

选择和操作文本

Range对象提供了很多方法来选择和操作文本。例如，通过创建Range对象并将其绑定到文档中的某个元素，可以实现对该元素内某个文本块进行获取、删除、替换等操作。

2.实现富文本编辑器

基于Range对象的API，以及contentEditable属性，可以轻松地实现富文本编辑器功能。用户在编辑器中输入文本时，可以根据鼠标移动和按键事件动态设置Range对象的范围，并在此基础上实现各种编辑操作，比如加粗、倾斜、下划线、字号、颜色等。

3.实现拖拽操作

Range对象也可以用于实现拖放操作。通过创建Range对象，将其绑定到某个拖放源元素上，并在drop事件触发时获取目标元素上被拖放至的位置，从而完成元素的拖放操作。

2.选择元素节点文本

range.selectNode();

selectNode()方法是用来选中某个节点对象内的文本内容，并创建一个范围，以供后续的操作和处理。

3.清空选择区域

window.getSelection().removeAllRanges();

4.将指定的Range对象添加到当前选择区域中

window.getSelection().addRange(range);

window.getSelection().addRange(range)方法的作用是将指定的Range对象添加到当前选择区域中，以便后续文本复制操作能够精确地复制我们所选中的文本内容

5.执行复制命令到剪切板

document.execCommand("copy");

若失败则输出错误信息

6.清空所有区域

window.getSelection().removeAllRanges();

简述步骤

创建一个空的Range对象，使用document.createRange()方法；

通过该Range对象的selectNode()方法，选择id为"text-to-copy"的HTML元素节点，并将其包含的文本内容添加到范围内；

使用window.getSelection().removeAllRanges()方法清空当前所有选择区域；

将这个Range对象添加到当前选择区域中，以便后续操作；

尝试使用document.execCommand("copy")方法将选中的文本复制到剪切板中；

如果上述操作失败，则输出错误信息到控制台；

再次使用window.getSelection().removeAllRanges()方法清空选择区域。

三.疑惑与解答

1.为什么要清空选择区域？

答：

执行window.getSelection().removeAllRanges()的目的是清空当前选择区域。这是因为在前面的代码中，使用了range.selectNode()方法选择了一个HTML元素节点的文本内容，并将其添加到Range对象中。此时，如果不先清空选择区域，而直接调用document.execCommand("copy")方法，则会将整个文档的内容复制到剪贴板中，而不是我们想要的选中的部分文本。

因此，在执行复制操作前，需要先清空当前选择区域，然后再将选中的文本内容添加到新创建的Range对象中，在执行完复制操作后，再次清空选择区域。

总之，清空选择区域是为了确保只有我们所选中的文本被复制到剪贴板中，而不会复制整个文档或其他部分的文本内容。

1.window.getSelection().removeAllRanges();函数不会把range.selectNode(document.getElementById("text-to-copy"));选择的文本也清空吗？

答：

window.getSelection().removeAllRanges() 方法不会清空通过 range.selectNode() 方法选择的文本范围对象。

在此代码中，我们首先使用 range.selectNode() 方法选择了特定的HTML元素节点的文本内容，并将其添加到Range对象中。然后，使用 window.getSelection().removeAllRanges() 方法清空当前选择区域的所有文本范围，但它不会影响到之前创建的范围。

在复制操作之后，我们再一次使用 window.getSelection().removeAllRanges() 方法清空选择区域，以确保在下一次操作之前没有任何异常的选择区域。

总之，window.getSelection().removeAllRanges() 方法只是用来清空当前的选择区域，而不会影响之前通过 range.selectNode() 选择的文本。

3.最后为什么要清空区域

确保已经复制的文本内容不再被选定，以避免产生意外的选择行为。

在执行完document.execCommand("copy")方法之后，被复制的文本内容仍然处于被选中状态，此时如果用户进行其他操作（如鼠标点击、拖动等）可能会影响到页面的交互体验和操作结果。

通过调用window.getSelection().removeAllRanges()方法，可以清空当前页面的所有文本选择，保证下一次操作时用户处于没有选中任何文本的状态，从而确保页面的正常交互和操作行为。

总之，window.getSelection().removeAllRanges()方法的最终目的是保持页面的正常运行和用户的操作体验。

Web功能之复制粘贴剪切板相关推荐

Java 访问复制粘贴剪切板
以下共有4个函数分别是: 1.从剪切板获得文字. 2.将字符串复制到剪切板. 3.从剪切板获得图片. 4.复制图片到剪切板. /** * 从剪切板获得文字. */ public static Stri ...
Java 访问(复制,粘贴)剪切板
以下共有4个函数分别是: 1.从剪切板获得文字. 2.将字符串复制到剪切板. 3.从剪切板获得图片. 4.复制图片到剪切板. /** * 从剪切板获得文字. */ public static Stri ...
android读取剪切板的方法,Android复制粘贴剪切板内容的一种方法
1 Clipper介绍 Clipper是一款简单的app, 它可以通过一行adb shell命令来和安卓系统剪切板服务交互. 官方说明:https://github.com/majido/clippe ...
智能复制粘贴剪切板管理工具——Pastebot
有时候,你需要拷贝多个项目,再把它们分别粘贴到另一个窗口中不同的输入框里.打个比方,你在填写姓名.地址.城市.省份.邮政编码.电子邮件和电话号码等信息时一定想过:要是能一次性搞定这些项目就好了! 智能 ...
Android 复制到剪切板功能
Android 复制到剪切板功能-------------- 1.复制到剪切板会使用ClipboardManager,在SDK版本为11前后使用的包不一样.一个是android.text(已弃用),一 ...
监听浏览器复制粘贴事件开箱即用的复制到剪切板
监听键盘ctrl+c ctrl+v area.onkeydown = (event) => { if (event.ctrlKey) {if (event.keyCode == 67) {ale ...
这个神器：功能强大的 Mac 剪切板记录管理工具
程序员吴师兄读完需要 2 分钟速读仅需 1 分钟大家好,我是你们的吴师兄. 今天给大家分享一款软件,这款软件我是真的喜欢,而且真的很有用,可以极大的提高办公效率. 这款软件就是:「Paste」, ...
uniapp 复制到剪切板四端适配
记得很早的时候实现过一次,只不过那次是纯 vue 实现的 h5+,但是想用在 uniapp中还是不行.有些地方不能用!不过在 App 中的方法还是可以使用的: Vue 复制内容到系统剪切板_唐僧的 ...
clipboard.js 实现动态获取内容并复制到剪切板
一个按钮实现先ajax请求,再实现复制功能: 使用clipboard.js分为以下几个步骤: 1.引入一个clipboard.js的文件: 2.新建一个clipboard对象: 3.点击按钮获取目标对 ...

Web功能之复制粘贴剪切板