js实现网页内自定义粘贴板

Posted 2023-03-29

参考技术A   很酷吧，相信经常在网上复制粘贴的人应该不陌生，我也是经历过，觉得很神奇，所以就寻思着是不是也在自己的博客里面也实现这个功能，经过一番查资料于研究，我总算弄明白了其中的原委，并实际应用于我的博客，你可以复制我粘贴试试，觉得酷的话就可以往下接着看了！下面来看一下实现过程。这里说明一下，浏览器版本较低的话可能`addEventListener()`不支持，特别是IE浏览器，IE8以前包括IE8的版本都不支持此方法。

    当用户选中某段内容时window.getSelection()获取一个Selection对象，将这个`objSelection.tostring()`，就是选中区的内容，这里可以用` var selectionString = window.getSelection().toString()`在控制台查看，能在控制台查看说明我们就可以通过js获取到，selectionString + '自定义内容'，到这里复制的原内容我们就有了。这里我们要创建一个DOM容器来存`objSelection.tostring()`，最好是可以换行的，如p、div、textarea等。

  当一个html文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素，这里主要用其中的copy命令来实现复制功能，听说插件Clipboard.js也是调用这个方法实现复制功能的`bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)`，第一个参数是命令的名称，字符串类型，后两个参数我们可以不用，返回bool值，如果是 false则表示操作不被支持或未被启用命令只介绍用到的copy命令:

  > copy：拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。

  这是很重要的一步，这是复制内容的关键命令。这里我们只需要在正确的时间执行`document.execCommand('copy')`即可。

  addEventListener()方法用于向指定元素添加事件句柄，这里我就抛开文档，就针对本次功能对这个HTML DOM方法进行通俗的解释了，这里主要用来规定我们自定义复制功能的有效DOM范围，来个例子：

  //body中有<div id="test">content</div>

  var el = document.getElementById('test');

  el.addEventListener('copy', function (e)

    // 触发copy事件后的处理

 

  这个例子中我们实现的功能将只在id为test的DOM元素里有效，其它地方将恢复默认复制功能。

    Range表示包含节点和部分文本节点的文档片段。用`var range = document.createRange()`方法创建，这里面为什么要创建Range呢，主要是用来存储Selection对象的开始位置和终点位置，因为我们是要阻止默认的copy事件，让copy的内容是用户选中的内容加上我们自定义的内容，再将这个内容放入粘贴板，形成最终的粘贴内容。`document.createRange`得到是还没有放内容的片段，我们我们还会用到`Range.setStart()`设置Range的起点和`Range.setEnd()`设置Range的终点。最终`selectionObj.removeAllRanges()`将selectionObj中的默认Range 去掉，`selectionObj.addRange(range)`,粘贴板就有了，不出意外去粘贴就会有选中的内容加自定义的内容了。

源码可以联系作者。这里有个特别注意的点，如果是原生js的话直接调用函数就可以，如果是vuejs的话图片中可以看到，我是在mounted()钩子函数里调用，而不是在created()钩子函数里调用，这里一定不能在created()钩子函数里调用，为什么呢？

因为created()执行的时候一般是在html渲染前的操作，此时el还是undefined，所以执行getElementById()就会报错，created()适合做html渲染前的数据初始化工作。而mounted()一般是在html渲染完成后的操作，此时el，data都已经加载完成，一般对dom的操作都写在mounted中，这是个要注意的点，喜欢的话就给作者点个心，谢谢

实现复制文本到粘贴板

前言

我们在做项目的时候，可能会遇到做复制的功能，小玲今天就遇到了，所以就有了这篇文章~

一 原生js实现

项目中经常会遇到点击按钮复制订单号、订单id等内容到粘贴板中的需求。可是在网页上我们通常都是用Ctrl + c或右击复制的，别担心，js也是有复制命令的，那就是document.execCommand(‘copy‘); 这个命令会将选中的内容复制到粘贴板中，那岂不是还需要选中？别急input和textarea元素有一个select()方法，这个方法可以帮我们自动选中。于是就有了下面的代码，复制过去试试吧！

 

 1 function copy(text) {
 2     var input = document.createElement(‘input‘);
 3     input.setAttribute(‘readonly‘, ‘readonly‘); // 防止手机上弹出软键盘
 4     input.setAttribute(‘value‘, text);
 5     document.body.appendChild(input);
 6     // input.setSelectionRange(0, 9999);
 7     input.select();
 8     var res = document.execCommand(‘copy‘);
 9     document.body.removeChild(input);
10     return res;
11 }

 

思路分析：

1. 创建input或textarea，因为这两个DOM具有select方法，可以选中内容（document.execCommand(‘copy‘)复制内容必要条件）;
2. 给input赋值为需要赋值的内容
3. 将DOM添加到文档中
4. 选中输入框中的值（也就是要复制的值）
5. 执行复制命令
6. 最后别忘了从文档中移除DOM元素
7. 此函数最后返回了复制是否成功的结果（true/false，document.execCommand(‘copy‘)本身会返回true/false），你可以做相应的交互提示等。

 

我在一个Vue项目中用这种原生的方式实现啦。

1   <el-dialog
2         width="38%"
3         title="学生加入方式"
4         :visible.sync="innerVisible"
5         append-to-body>
6         <span>学生可通过如下方式加入班级，班级学生满后其他学生将不能加入</span>
7         <p>口令:{{this.command}}</p>
8         <el-button type="primary" @click="copyText">复制口令 </el-button>
9  </el-dialog>

 

 1  data() {
 2     return {
 3         command:‘口令是123456789‘,
 4         innerVisible:false
 5     }
 6   },
 7   computed:{
 8   },
 9   mounted() {
10   },
11   methods:{
12      ......
13       //复制口令
14       copyText(){
15           let text = this.command
16           if(this.copy(text)){
17               this.$message.success(‘口令内容已经复制到剪切板！‘)
18           }else{
19               this.$message.error("抱歉，复制失败！")
20           }
21       },
22       //复制
23     copy(text) {
24         var input = document.createElement(‘input‘);
25         input.setAttribute(‘readonly‘, ‘readonly‘); // 防止手机上弹出软键盘
26         input.setAttribute(‘value‘, text);
27         document.body.appendChild(input);
28         // input.setSelectionRange(0, 9999);
29         input.select();
30         var res = document.execCommand(‘copy‘);
31         document.body.removeChild(input);
32         return res;
33     },
       ......
34   }

效果展示：

 

二.插件实现

如果是Vue项目的话，还可以用一个Vue插件实现---第三方插件 clipboard

1.安装插件

npm install vue-clipboard2 --save

 

2.全局注入（main.js）

import VueClipboard from ‘vue-clipboard2‘

Vue.use(VueClipboard)

 

3.使用

1 <ul class="file-list">
2   <li v-for="(f, index) of files" :key="index">
3     <span>[文件{{index + 1}}] {{f}}</span>
4     <span class="copy-btn" v-clipboard:copy="f" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</span>
5   </li>
6 </ul>

1 // 复制成功时的回调函数
2 onCopy (e) {
3    this.$message.success("内容已复制到剪切板！")
4 },
5 // 复制失败时的回调函数
6 onError (e) {
7    this.$message.error("抱歉，复制失败！")
8 }

 

三.后记

因为小玲的这个项目中只有这一个地方会用到复制的功能，所以小玲没有在项目中引入这个插件，而是选择用原生js的方式来实现复制功能。如果你的项目中很多地方要用到复制文本的功能，可以考虑使用这个 clipboard 插件。当然具体怎么选择还是根据项目的实际情况吧~

 

参考文档：

https://www.cnblogs.com/zhaodesheng/p/11464934.html

https://www.cnblogs.com/similar/p/10757540.html