Comment implémenter la fonction de copie de carton à l'aide de JS

Cet article analysera 20 lignes de code JS pour implémenter la fonction presse-papiers. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

Utiliser le presse-papiers est une compétence de base. En tant que codeur, tout le monde doit savoir que Tab, Ctrl/Cmd + A, Ctrl/Cmd + C et Ctrl/Cmd + V sont des touches de raccourci pour la mise au point automatique, le copier et le coller respectivement.

Mais cela n'est peut-être pas facile pour les utilisateurs ordinaires. Même si un utilisateur sait ce qu'est un presse-papiers, il sera difficile de mettre en évidence le texte exact qu'il souhaite (sauf pour) ceux qui ont une bonne vue ou des réflexes rapides. Si l'utilisateur ne connaît pas les raccourcis clavier, ne peut pas voir le menu d'édition masqué, n'a jamais utilisé le menu contextuel ou ne sait pas qu'un appui long sur l'écran tactile fait apparaître le menu d'options, alors il le fera. je ne connais probablement pas la fonction de copie.

Alors devrions-nous fournir un bouton « Copier dans le presse-papiers » pour aider l'utilisateur ? Cette fonctionnalité devrait être utile même pour les utilisateurs très familiers avec les raccourcis clavier.

À propos de la sécurité du presse-papiers

Il y a quelques années, il était impossible pour les navigateurs d'utiliser directement le presse-papiers. Les développeurs ont dû l'implémenter via Flash.

Le presse-papiers peut sembler sans importance, mais imaginez ce qui se passerait si le navigateur pouvait voir et manipuler le contenu à volonté. Les scripts JS (y compris les scripts tiers) peuvent afficher les informations textuelles dans le presse-papiers et envoyer des mots de passe, des informations sensibles ou même des documents entiers au serveur distant.

Les fonctions de base du presse-papiers actuel sont limitées, avec les restrictions suivantes :

1. La plupart des navigateurs prennent en charge le presse-papiers, à l'exception de Safari.

2. La prise en charge varie selon le navigateur et certaines fonctionnalités sont incomplètes ou boguées.

3. L'événement doit être initié par l'utilisateur, par exemple en cliquant sur la souris ou en appuyant sur le clavier. Le script n'a pas libre accès au presse-papiers.

document.execCommand（）

Cette méthode est la clé de la mise en œuvre du presse-papiers. Elle peut transmettre trois paramètres : couper, copier et coller. Commençons par le document.execCommand（'copy'） le plus couramment utilisé.

Avant de l'utiliser, nous devons vérifier si le navigateur prend en charge la commande de copie : document.queryCommandSupported('copy'); ou document.queryCommandEnabled('copy'); , ces deux méthodes ont le même effet.

Mais sous Chrome, bien que Chrome prenne en charge l'utilisation de la dénomination de copie, les deux méthodes renvoient false . Il est donc préférable d'envelopper le code de vérification dans un bloc try-catch.

Prochaine étape, que devons-nous autoriser les utilisateurs à copier ? Le texte doit être mis en surbrillance et tous les navigateurs peuvent utiliser la méthode select() pour sélectionner du texte dans une saisie de texte et une zone de texte. Parallèlement, Firefox et Chrome/Opera prennent également en charge la méthode document.createRange , qui permet de sélectionner du texte à partir de n'importe quel élément, comme suit :

// select text in #myelement node
  var
   myelement = document.getElementById('#myelement'),
   range = document.createRange();
  range.selectNode(myelement);
  window.getSelection().addRange(range);

mais IE/Edge ne la prend pas en charge.

clipboard.js

Si vous ne souhaitez pas implémenter vous-même une méthode de presse-papiers multi-navigateurs plus robuste, clipboard.js peut vous aider. Il propose plusieurs façons de définir des options, telles que les attributs de données H5, la définition d'éléments déclencheurs de liaison et d'éléments cibles, tels que :

<input id="copyme" value="text in this field will be copied" />
<button data-clipboard-target="#copyme">copy</button>

Faites-le vous-même

Le la taille de clipboard.js n'est que de 2 Ko. Si seules certaines des fonctions suivantes sont implémentées, il peut être implémenté dans 20 lignes de code :

Seuls certains éléments du formulaire peuvent être copiés

S'il se trouve dans un navigateur non pris en charge (oui, cela signifie Safari), le texte sélectionné peut être mis en surbrillance et l'utilisateur sera invité à appuyer sur Ctrl/Cmd + C.

Comme clipboard.js, créez d'abord un bouton pour déclencher la méthode. Il a un attribut de données data-copytarget, pointant vers l'élément à copier (c'est-à-dire #website)

<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>
一个立即执行函数表达式绑定click事件的函数，该函数用于解析 data-copytarget 属性内容，选择对应字段的文本并执行 document.execCommand(&#39;copy&#39;) ,。若失败，文本保持选中状态，显示提示框：
(function() {
 &#39;use strict&#39;;
 // click events
 document.body.addEventListener(&#39;click&#39;, copy, true);
 // event handler
 function copy(e) {
  // find target element
  var
   t = e.target,
   c = t.dataset.copytarget,
   inp = (c ? document.querySelector(c) : null);
  // is element selectable?
  if (inp && inp.select) {
   // select text
   inp.select();
   try {
    // copy text
    document.execCommand(&#39;copy&#39;);
    inp.blur();
   }
   catch (err) {
    alert(&#39;please press Ctrl/Cmd+C to copy&#39;);
   }
  }
 }
})();

Exemple

Bien que dans l'exemple ci-dessus, y compris le code des styles et des animations, le code dépasse 20 lignes, les animations et les styles sont facultatifs.

Résumé :

1. Sélectionnez le contenu de l'élément de formulaire à copier via .select()

2. Appelez le document. La méthode execCommand( "copy")

3. appelle la méthode .blur() pour supprimer le focus de l'élément de formulaire

4. Inclure les étapes 2 et 3 Dans le bloc try catch, si le navigateur ne le prend pas en charge, il vous demandera

Autres moyens

Il existe de nombreuses nouvelles façons de appliquer le presse-papiers. Par exemple, Trello.com, lorsque vous passez votre souris sur une carte, vous pouvez appuyer sur Ctrl / Cmd + C et copier l'adresse du lien de la carte dans votre presse-papiers. L'implémentation derrière cela consiste à créer d'abord un élément de formulaire masqué contenant l'URL, puis à sélectionner et copier son contenu. Très intelligent et utile – je suppose que très peu d’utilisateurs connaissent cette fonctionnalité !

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter une liste circulaire Nodelist Dom à l'aide de JS

Comment obtenir un changement de couleur du texte après avoir cliqué dans Vue

Comment définir la couleur d'arrière-plan d'une page séparée dans Vue-cli

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!