Maison > interface Web > js tutoriel > clipboard.js utilise des pages HTML pour copier les informations dans le presse-papiers

clipboard.js utilise des pages HTML pour copier les informations dans le presse-papiers

巴扎黑
Libérer: 2017-07-18 17:00:04
original
2568 Les gens l'ont consulté

Récemment, je travaille sur une application de navigateur Web de service client intelligent. L'une des exigences est que le client clique sur le bouton "Copier la réponse" après avoir reçu la réponse

renvoyée par le système pour copier la réponse. le presse-papiers du système. Je pensais que c'était un petit cas, mais j'ai trouvé qu'il n'est pas facile pour

d'avoir une bonne compatibilité avec les différents navigateurs grand public. La raison en est que, pour des raisons de sécurité, la plupart des navigateurs modernes ne fournissent pas d'interface universelle de copie du presse-papiers (ou si c'est le cas, elle est désactivée par défaut).

Après une recherche en ligne, il existe environ deux solutions existantes :

Une : utiliser window.clipboardData en javascript natif pour implémenter la fonction de copie dans le presse-papiers

Deuxième : utilisez la bibliothèque Zero Clipboard ;

Après l'avoir essayée, j'ai constaté qu'aucune des solutions existantes ne pouvait répondre aux besoins.

L'option 1 prend uniquement en charge le navigateur IE, mais ne fonctionne pas sur les navigateurs Firefox et Chrome.

L'option 2 est la solution adoptée par la plupart des sites Web existants (y compris github, etc.). ZeroClipboard est un

plug-in JS pour la copie de presse-papiers développé par des maîtres étrangers. pour réaliser la fonction de copie entre navigateurs. Lorsque nous utilisons ZeroClipboard

, il masquera discrètement une petite vidéo Flash (swf) sans affecter notre interface utilisateur. Il nous suffit d'utiliser

pour implémenter la fonction de copie.

Le "Zéro" dans ZeroClipboard fait référence à "invisible, zéro interférence".

Ceux qui sont intéressés peuvent se référer à http://my.oschina.net/shniu/blog/298406?p=1

Mais dans les navigateurs modernes , Flash décline progressivement et le navigateur Firefox n'active pas Flash par défaut, donc Zero Clipboard fonctionne également mal en termes de compatibilité

.

Alors, existe-t-il une solution simple et compatible pour des opérations simples comme copier dans le presse-papiers ? quelques! Il s'agit du projet open source clipboard.js sur github

(site officiel : http://zenorocha.github.io/clipboard.js/) L'introduction du site officiel à clipboard.js

est très simple :

 Une approche moderne pour copier du texte dans le presse-papiers Pas de Flash Pas de dépendances Juste 3 Ko gzippés

Copier du texte dans le presse-papiers ne devrait pas être difficile. d'étapes à configurer

ou des centaines de Ko à charger Mais surtout, cela ne devrait pas dépendre de Flash ou d'un framework volumineux.

C'est pourquoi clipboard.js existe.(Copier le texte. vers le presse-papiers Cela ne devrait pas être compliqué, cela ne devrait pas nécessiter beaucoup d'étapes et des centaines de fichiers Ko, et

en plus, cela ne devrait pas s'appuyer sur Flash et d'autres frameworks, c'est pourquoi le presse-papiers existe)

Chemin de téléchargement :

Application :

L'attribut data-clipboard-target correspond au html qui doit être copié. Il peut porter le style de la page, s'il est enregistré dans. mot. txt n'en est aucun.

L'exemple est le suivant :

l'attribut data-clipboard-action est utilisé pour distinguer le contenu copié ou coupé.
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
Copier après la connexion

vous pouvez vous y attendre, l'action de coupe ne fonctionne que sur les éléments ou