JS implémente le partage de code de la fonction de copie de table de montage

Utiliser le presse-papiers est une compétence essentielle. 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 (sauf pour) ceux qui ont une très bonne vue ou des réflexes rapides de surligner le texte exact qu'ils souhaitent. 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 le 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.

La taille du 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. peut être implémenté Copié

Dans un navigateur non pris en charge (oui, 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 pour les styles et les 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 nouveaux presse-papiers Méthode d'application. 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é !

Recommandations associées :

Code js pour copier du contenu dans le presse-papier_Connaissances de base

Code JavaScript pour copier du contenu dans le presse-papier _compétences javascript

Méthode js pour réaliser en cliquant sur l'image et copier l'adresse de l'image dans les compétences pasteboard_javascript

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!