Réalisez la copie et la découpe de texte sans recourir à Flash ou à une bibliothèque JS. Téléchargement du code source inclus

Réalisez la copie et la découpe de texte sans recourir à Flash ou à une bibliothèque JS. Téléchargement du code source inclus_javascript.

WBOY

Libérer： 2016-05-16 15:37:01

original

923 Les gens l'ont consulté

Le rendu est le suivant :

Nous plaçons un bouton de copie sur la page Web, qui est principalement utilisé pour permettre aux utilisateurs de copier des textes complexes tels que des liens. Dans le passé, nous nous appuyions sur Flash via JS, ou même sur l'immense bibliothèque js de jQuery pour. copier le texte dans le presse-papiers. Ce que je veux vous présenter aujourd'hui est un plug-in très moderne qui ne nécessite pas de flash et ne s'appuie sur aucune autre bibliothèque js. Il s'appelle clipboard.js.

Voir la démo Télécharger le code source

HTML

Chargez d’abord le fichier clipboard.js local.

Copier le code Le code est le suivant :

Ajoutez ensuite le contenu du champ de texte à copier ou couper ainsi que le bouton dans le corps.

Copier le code Le code est le suivant :

Ici, nous utilisons l'attribut data de HTML5 pour localiser la cible de l'objet de copie. Il pointe vers le champ de texte #foo, indiquant que le contenu de la valeur dans #foo est copié. L'attribut aria-label définit la copie une fois réussie. copie. Informations, utilisées pour demander des informations sur le résultat de la copie.

Il existe également un attribut data-clipboard-action, qui définit si l'opération en cours est copier ou couper. La valeur par défaut est copier. Lorsque data-clipboard-action="cut", cliquez sur le bouton pour couper le texte. suivi de WORD fonctionne de la même manière. Bien entendu, l’opération de coupe ne fonctionne que sur le texte et la zone de texte.

Nous n'avons pas non plus besoin du contenu d'éléments tels que input et textarea comme objets de copie. Nous pouvons définir le contenu à copier sur le bouton via l'attribut ata-clipboard-text Cliquez sur le bouton pour copier dans le contenu. correspondant à ata-clipboard-text .

Copier le code Le code est le suivant :

Javascript

Ajoutez le code suivant au

Derniers articles par auteur