Implémentation de la fonction copier-coller JS

Implémentation de la fonction copier-coller JS

Ce chapitre explique comment copier du contenu dans le presse-papiers via le code js, puis le coller si nécessaire.

Divisé en deux parties :

• Les deux premières parties utilisent la méthode execCommand, qui est désormais obsolète (ps : bien qu'elle puisse toujours être utilisée), et la copie de contenu sur une seule ligne doit être combinée avec la balise d'entrée, et la copie de contenu sur plusieurs lignes doit être combinée. à combiner avec la balise textarea.

• La troisième partie utilise désormais l'API Clipboard pour copier une ou plusieurs lignes de contenu. (méthode recommandée)

Méthode 1-execCommand

Cette méthode est une méthode sous l'objet document et est désormais obsolète.Cependant, étant donné qu'une telle méthode a déjà été utilisée pour implémenter la fonction de copie, elle est également écrite ici et est toujours disponible.

Copie sur une seule ligne

Transmettez le contenu à copier à l'attribut value via la balise d'entrée, puis exécutez la fonction de copie via la méthode execCommand sous l'objet document.

La mise en œuvre spécifique est la suivante :

handleCopy() {
    
    
  let copy_text = '需要复制的内容';//拿到想要复制的值
  
  let input_dom = document.createElement('input');//创建input元素
  input_dom.value = copy_text;//添加需要复制的内容到value属性
  document.body.appendChild(input_dom);//向页面底部追加输入框
  input_dom.select();//选择input元素
  document.execCommand("Copy");//执行复制命令
  alert("复制成功！");//弹出提示信息，不同组件可能存在写法不同
  
  //复制之后再删除元素，否则无法成功赋值
  input_dom.remove();//删除动态创建的节点
},

La méthode ci-dessus peut être ajoutée à l'événement de souris correspondant lorsque la page doit déclencher la fonction de copie.

Copier plusieurs lignes

Transmettez le contenu qui doit être copié à l'attribut value via la balise textarea et ajoutez le caractère de nouvelle ligne \r\n après le contenu qui doit être newlined , puis exécutez la fonction de copie via la méthode execCommand sous l'objet document.

La mise en œuvre spécifique est la suivante :

handleCopy() {
    
    
  let copy_text = '第一行需要复制的内容\r\n第二行需要复制的内容';//拿到想要复制的值
  
  let textarea_dom = document.createElement('textarea');//创建textarea元素
  document.body.appendChild(textarea_dom);//向页面底部追加输入框
  textarea_dom.value = copy_text; //添加需要复制的内容到value属性
  textarea_dom.select();//选择input元素
  document.execCommand("Copy");//执行复制命令
  alert("复制成功！");//弹出提示信息，不同组件可能存在写法不同
  
  //复制之后再删除元素，否则无法成功赋值
  document.body.removeChild(textarea_dom); //删除动态创建的节点
}

La méthode ci-dessus peut être ajoutée à l'événement de souris correspondant lorsque la page doit déclencher la fonction de copie.

API 2-Presse-papiers (recommandé)

La méthode navigator.clipboard.writeText de l'API Clipboard peut plus facilement implémenter la copie de contenu sur une seule ligne et sur plusieurs lignes, et cette méthode renverra un objet Promise, ce qui peut nous aider à gérer simplement le contenu qui doit être exécuté après la copie. réussit ou échoue.

La mise en œuvre spécifique est la suivante :

handleCopy() {
    
    
  let copy_text = '第一行需要复制的内容\r\n第二行需要复制的内容';//拿到想要复制的值
  
  // 使用Clipboard API复制文本到剪贴板中
  navigator.clipboard.writeText(copy_text).then(() => {
    
    
    alert("复制成功！")
  }).catch((err)=>{
    
    
    alert("复制失败！")
  })
}

La méthode ci-dessus peut être ajoutée à l'événement de souris correspondant lorsque la page doit déclencher la fonction de copie, et l'implémentation des sauts de ligne est directement prise en charge dans le contenu copié.

Avis:

La méthode navigator.clipboard.writeText ci-dessus n'aura qu'un objet presse-papiers sous l'objet navigateur du navigateur ; si vous appelez l'objet presse-papiers comme la méthode ci-dessus dans un framework frontal tel que vue, réagir, etc., il n'existera pas.

Parce que l'objet navigateur dans l'environnement où js est écrit dans ce type de framework frontal ne fournit pas d'objet presse-papiers et que l'objet presse-papiers n'est pas une propriété ou une méthode standard de l'objet navigateur.

Par conséquent, la nécessité d’utiliser l’API Clipboard dans ce type de framework doit être implémentée via des méthodes de dépendance tierces.

Voici un exemple d'utilisation de l'API Clipboard dans un framework Vue commun :

1. Tout d’abord, suivez les dépendances tierces du Presse-papiers

npm install clipboard --save

2. Introduisez-le dans le fichier d'échange ou globalement dans main.js

import Clipboard from 'clipboard'

3. Dans la méthode qui doit implémenter la fonction de copie, écrivez l'implémentation

<template>
	<div>
    <div class="copy_dom" @click="handleCopy"></div>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
    
    
  data: {
    
    
    clipboard: null
  }
  methods: {
    
    
  	handleCopy() {
    
    
      // 传递事件绑定的元素class名和需要复制的内容text，创建Clipboard实例 
	  this.clipboard = new Clipboard('.copy_dom', {
    
    
        text: () => {
    
    
          return '第一行需要复制的内容\r\n第二行需要复制的内容'
        }
      });
      // 复制成功后的回调函数
      this.clipboard.on('success', () => {
    
    
        // 释放内存，非常重要，不然会重复触发回调函数
		this.clipboard.destroy();
        console.log('复制成功！');
      })
     	// 复制失败后的回调函数
      this.clipboard.on('error', function(e) {
    
    
        console.log('复制失败！');
      })
		}
  },
  //beforeDestroy() {
    
    
  //  this.clipboard.destroy(); //组件页面销毁时，需要手动清理clipboard，释放内存
  //}
}
</script>

Dans le code ci-dessus, une fois l'instance du presse-papiers copiée avec succès, il est recommandé d'exécuter la méthode destroy de destruction de l'instance dans la fonction de rappel de réussite ; vous pouvez également exécuter la méthode destroy dans le cycle de vie beforeDestroy après la fermeture du composant de page.