js原生复制文本

js原生复制文本到剪切板

功能：实现一键复制文本内容，用于鼠标右键粘贴。

简单的模板如下：

const textarea = document.createElement("textarea");
textarea.value = '要复制的内容';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy')
document.body.removeChild(textarea);

现对其实现思路进行逐行分析。

1. 首先动态创建 textarea 标签

   const textarea = document.createElement("textarea");

   document.createElement()是一个JavaScript DOM方法，用于在文档中创建指定的HTML元素，只需要在JS中调用该方法，并指定要创建的元素的标签名称作为参数。

   创建完成后，即可对其进行相关操作，如添加文本内容、设置属性或将其添加至另一个元素中。比如这里其实设置textarea相关属性。

   //该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
   textarea.readOnly = 'readonly';
   textarea.style.position = 'absolute';
   textarea.style.left = '-9999px';

2. 将要 copy 的值赋给 textarea 标签的 value 属性

   textarea.value = '要复制的内容';

3. 将 textarea 插入到 body 中

   document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点；insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

   document.body.appendChild(textarea);

4. 选中值并复制

   textareaEle.select();
   document.execCommand('copy')

   当然实际过程中，如果复制成功要进行相关操作，直接进行判断即可。

   textarea.select()
   const result = document.execCommand('copy')
   if (result) {
       //根据实际进行设计
       ...
   }

5. body中将插入的内容移除

   document.body.removeChild(textarea)